资源下载：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>
完！
时间： 2024-10-14 17:08:28