标签：第一步 网站 mamicode rip span origin git class example
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>
运行结果如下：
标签：第一步 网站 mamicode rip span origin git class example
原文地址：https://www.cnblogs.com/hzyhx/p/11013113.html
