此插件基于Jquery库,使用之前需要引入jq及Magnifier文件,此插件效果如下:

使用方法:
<link rel="stylesheet" type="text/css" href="css/magnifier.css"> <!--引入样式文件-->
<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script> <!--引入js文件-->
<script type="text/javascript" src="js/magnifier.js"></script>
使用实例:
<!--Html部分-->
<div class="magnifier" id="magnifier1">
<div class="magnifier-container">
<div class="images-cover"></div>
<!--当前图片显示容器-->
<div class="move-view"></div>
<!--跟随鼠标移动的盒子-->
</div>
<div class="magnifier-assembly">
<div class="magnifier-btn">
<span class="magnifier-btn-left"><</span>
<span class="magnifier-btn-right">></span>
</div>
<!--按钮组-->
<div class="magnifier-line">
<ul class="clearfix animation03">
<li>
<div class="small-img">
<img src="images/1.png" />
</div>
</li>
<li>
<div class="small-img">
<img src="images/2.png" />
</div>
</li>
<li>
<div class="small-img">
<img src="images/3.png" />
</div>
</li>
<li>
<div class="small-img">
<img src="images/4.png" />
</div>
</li>
<li>
<div class="small-img">
<img src="images/1.png" />
</div>
</li>
</ul>
</div>
<!--缩略图-->
</div>
<div class="magnifier-view"></div>
<!--经过放大的图片显示容器-->
</div>
<!--js代码部分-->
$(function() {
var magnifierConfig = {
magnifier : "#magnifier1",//最外层的大容器
width : 500,//承载容器宽
height : 500,//承载容器高
moveWidth : null,//如果设置了移动盒子的宽度,则不计算缩放比例
zoom : 5//缩放比例
};
var _magnifier = magnifier(magnifierConfig);
/*magnifier的内置函数调用*/
/*
//设置magnifier函数的index属性
_magnifier.setIndex(1);
//重新载入主图,根据magnifier函数的index属性
_magnifier.eqImg();
*/
});
提取码:9gm7
这个插件不错,收下了