artZoom 图片可放大旋转

Posted 2020-10-05 微笑的小小向日葵

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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>

完！

以上是关于artZoom 图片可放大旋转的主要内容，如果未能解决你的问题，请参考以下文章

js进行数字图像处理：亮度对比度马赛克画笔放大缩小镜像贴纸旋转颜色值显示

OpenFramework中视频或者图片进行中心旋转平移放大缩小矫正（本例以视频为准，只给出主要代码）