jQuery 插件 evenZoom 放大镜
Posted hzyhx
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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的后面
运行结果如下：
以上是关于jQuery 插件 evenZoom 放大镜的主要内容，如果未能解决你的问题，请参考以下文章