artZoom 图片可放大旋转

资源下载：http://www.sucaijiayuan.com/Js/TuPianDaiMa/774.html

第一步：引入文件

1 <link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
2 <script src="js/jquery-1.7.2.min.js"></script>
3 <script src="js/jquery.artZoom.js"></script>

第二步：设计HTML结构 img必须加上artZoom类

1 <div id="demo" class="text-center">
2     <a href="images/01.jpg"><img class="artZoom" src="images/01m.jpg"/></a>
3 </div>

第三步：加上css样式，根据自己需求添加

 1 <style type="text/css">
 2     .artZoom {
 3         padding: 3px;
 4         background: #FFF;
 5         border: 1px solid #EBEBEB;
 6     }
 7     
 8     body {
 9         font-size: 75%;
10         font-family: '微软雅黑';
11         padding-bottom: 200px;
12     }
13     
14     img {
15         border: 0 none;
16     }
17     
18     #demo {
19         width: 540px;
20         padding: 5px;
21         background: #FBFCFD;
22     }
23 </style>

第四步：加载 artZoom插件

 1 <script type="text/javascript">
 2     jQuery(function ($) {
 3         $('.artZoom').artZoom({
 4             path: './images',    // 设置artZoom图片文件夹路径
 5             preload: true,        // 设置是否提前缓存视野内的大图片
 6             blur: true,            // 设置加载大图是否有模糊变清晰的效果
 7             
 8             // 语言设置
 9             left: '左旋转',        // 左旋转按钮文字
10             right: '右旋转',        // 右旋转按钮文字
11             source: '看原图'        // 查看原图按钮文字
12         });
13     });
14 </script>

可直接运行代码：

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="UTF-8">
 5         <title>artZoom</title>
 6         <link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>
 7         <script src="js/jquery-1.7.2.min.js"></script>
 8         <script src="js/jquery.artZoom.js"></script>
 9         <script type="text/javascript">
10             jQuery(function ($) {
11                 $('.artZoom').artZoom({
12                     path: './images',    // 设置artZoom图片文件夹路径
13                     preload: true,        // 设置是否提前缓存视野内的大图片
14                     blur: true,            // 设置加载大图是否有模糊变清晰的效果
15                     
16                     // 语言设置
17                     left: '左旋转',        // 左旋转按钮文字
18                     right: '右旋转',        // 右旋转按钮文字
19                     source: '看原图'        // 查看原图按钮文字
20                 });
21             });
22         </script>
23     <style type="text/css">
24         .artZoom {
25             padding: 3px;
26             background: #FFF;
27             border: 1px solid #EBEBEB;
28         }
29         
30         body {
31             font-size: 75%;
32             font-family: '微软雅黑';
33             padding-bottom: 200px;
34         }
35         
36         img {
37             border: 0 none;
38         }
39         
40         #demo {
41             width: 540px;
42             padding: 5px;
43             background: #FBFCFD;
44         }
45     </style>
46     </head>
47     <body>
48         <div id="demo" class="text-center">
49             <a href="images/01.jpg"><img class="artZoom" src="images/01m.jpg"/></a>
50         </div>
51     </body>
52 </html>

完！

相关阅读:
on和where的区别
 分组查询 group by having 排序 order by asc(升序)或desc(降序)
连接查询 left join on， union
md5加密方法
 where查询条件的指定,between and,in,like
Mapnix(转) Anny
Rolebased access control(RBAC) Anny
TestComplete如何识别对象(转) Anny
Jira workflow Anny
crx文件 Anny
原文地址：https://www.cnblogs.com/ljblog/p/7490738.html