artZoom 图片可放大旋转

第一步：引入文件
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>

 

完！

 
 
 
 
 
 
posted @ 2017-09-07 17:09  微笑的小小向日葵  阅读(1163)  评论(0)  编辑  收藏  举报