Magic Zoom V3图片放大镜特效仿凡客诚品商城图片细节放大展示

最新推荐文章于 2023-02-28 10:27:14 发布

ios0213

最新推荐文章于 2023-02-28 10:27:14 发布

阅读量628

点赞数

分类专栏： CSS

36 篇文章 0 订阅

订阅专栏

Magic Zoom v3.1.19 是最新版的图片放大镜组件，非常的好用，可以任意的定义放大镜的尺寸，放大镜的显示位置，可以定义图片标题，甚至滤镜的透明度均可定义，设置参数相当丰富，可以根据自己要求DIY出不同的效果。这个组件兼容IE6以上和Firefox，代码整合简易。

1.在<head>区加入以下代码：

<link rel="stylesheet" href="magiczoom.css" type="text/css" />
<script src="magiczoom.js" type="text/javascript"></script>

2. 图片使用如下面示例：

<a href="big.jpg" class="MagicZoom"><img src="small.jpg"/></a>

如果需要不同的效果，就增加相应的代码参数，具体的参数详见官方帮助：http://www.magictoolbox.com/magiczoom_integration/

免费版的内容中会有“Please upgrade to full version of Magic Zoom”的字样，是因为这个组件中的内容是变形字符串加密过的。所以无法直接通过读源码来修改。网友ArthurXF给出了修改方法如下：

1.找到magiczoom.js最后1个括号“)”；

2.在那个括号“)”前插入：

.replace("this.innerHTML=d","this.innerHTML=''")

提示：由于Magic Zoom非免费源码，所以商业应用请使用正版。

关注