商品图片放大镜效果

效果如下

使用步骤（非常简单）：

1、引入css <link rel="stylesheet" href="magiczoom/MagicZoom.css"/>

2、引入js <script src="magiczoom.js" type="text/javascript"></script>

3、应用到标签中

<body>　　<a href="201042112545461.jpg" class="MagicZoom" rel="zoom-position:right">
    　　<img src="2010421125551904.jpg"/>
　　</a></body>

除此之外什么都不用做。

当然如果具体使用时，要注意它们参数，这样才能完美的嵌入到应用里。

magiczoon.js官网

demo下载地址

效果如下

时间： 2024-08-07 00:23:38

商品图片放大镜效果的相关文章

图片放大镜效果

1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"/> 5 <title>图片放大镜效果</title> 6 <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css" media="all&

商品图片放大镜特效主要是基于鼠标捕获,计算放大镜移动距离原理而制成 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <style> 7 * { 8 margin: 0; 9 padding: 0 10 } 11 12 #demo { 13 display: block; 14 wid

利用jqueryzoom实现图片放大镜效果

在你的页面中包含 jqzoom.css Html代码 <link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen"> 包含 jQzoom 和 jQuery JS 代码: Html代码 <script type="text/javascript" src="your_pat

商品图片放大镜

引入:<script type="text/javascript" src="${base}/resources/shop/js/jquery.jqzoom.js"></script> // 商品图片放大镜$zoom.jqzoom({ zoomWidth: 368, zoomHeight: 368, title: false, showPreload: false, preloadImages: false}); 参考:http://www.

jquery图片放大镜效果制作变焦镜头图片放大查看

jquery图片放大镜效果制作变焦镜头图片放大查看 http://www.17sucai.com/pins/demoshow/8511

WPF设置VistualBrush的Visual属性制作图片放大镜效果

原文:WPF设置VistualBrush的Visual属性制作图片放大镜效果效果图片: 原理:设置VistualBrush的Visual属性,利用它的Viewbox属性进行缩放. XAML代码:// Window1.xaml<Window x:Class="MagnifyingGlass.Window1" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns

商品图片局部放大效果

还是先看效果图,再晒源代码当鼠标放到图片的哪个部位的时候,那个部位就会放大就像淘宝网查看商品那样的效果下面来看源代码 html代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org

canvas知识02：图片放大镜效果

效果截图: JS代码: <script> // 初始化canvas01和上下文环境 var cav01 = document.getElementById('cav01'); var cxt01 = cav01.getContext('2d'); // 初始化canvas02和上下文环境 var cav02 = document.getElementById('cav02'); var cxt02 = cav02.getContext('2d'); //初始化image对象和缩放比例 var

jQuery和CSS3打造逼真的图片放大镜效果

这是一款效果非常逼真的jQuery和CSS3超逼真的图片放大镜特效.该图片放大镜特效使用CSS3的box-shadow和border-radius实现来制作放大镜的样式,使用jQuery来获取当前鼠标的坐标系,并修改当前坐标系的背景图像. 在线演示: 下载地址:http://www.htmleaf.com/jQuery/Image-Effects/201503171533.html