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的后面
运行结果如下：
原文地址：https://www.cnblogs.com/hzyhx/p/11013113.html
时间： 2024-10-09 12:45:34