jQuery 插件 evenZoom 放大镜
evenZoom 放大镜
evenZoom 是一款放在镜插件,可以实现商城中放大图片的功能。
在下载github的地址是 https://github.com/no1lov3sme/evenZoom
再到jQuery网站中下载样式:http://code.jquery.com/jquery-1.6.3.min.js
第一步:引入jQuery
1 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script>
第二步:引入Zoom.css
1 <link rel="stylesheet" type="text/css" href="css/evenZoom.css" />
引入Zoom.js
2 <script type="text/javascript" src="js/evenZoom.js"></script>
第三步:加数据缩放,属性为#example
1 <div id="example" data-zoomed="img/img-zoomed.jpg"> 2 <img src="img/img-original.jpg" alt="Example" /> 3 </div>
第四步:初始化均匀缩放#example选择器
1 $(function() { 2 $("#example").evenZoom(); 3 });
完整代码:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>放大镜</title> 6 <link rel="stylesheet" type="text/css" href="css/evenZoom.css" /> 7 </head> 8 <body> 9 <!--数据缩放--> 10 <div id="example" data-zoomed="img/img-zoomed.jpg"> 11 <img src="img/img-original.jpg" alt="Example" /> 12 </div> 13 14 <script type="text/javascript" src="js/jquery-1.6.3.min.js"></script> 15 <script type="text/javascript" src="js/evenZoom.js"></script> 16 17 <script> 18 $(function(){ 19 $("#example").evenZoom(); 20 }); 21 </script> 22 </body> 23 </html>
注意:所有jquery插件的js代码都要放在jquery.js的后面
运行结果如下: