第一步：引入文件
 <link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>

 <script src="js/jquery-1.7.2.min.js"></script>

 <script src="js/jquery.artZoom.js"></script>
第二步：设计HTML结构 img必须加上artZoom类
 <div id="demo" class="text-center">

     <a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>

 </div>
第三步：加上css样式，根据自己需求添加
 <style type="text/css">

     .artZoom {

         padding: 3px;

         background: #FFF;

         border: 1px solid #EBEBEB;

     }

     body {

         font-size: 75%;

         font-family: '微软雅黑';

         padding-bottom: 200px;

     }

     img {

         border: 0 none;

     }

     #demo {

         width: 540px;

         padding: 5px;

         background: #FBFCFD;

     }

 </style>
第四步：加载 artZoom插件
 <script type="text/javascript">

     jQuery(function ($) {

         $('.artZoom').artZoom({

             path: './images',    // 设置artZoom图片文件夹路径

             preload: true,        // 设置是否提前缓存视野内的大图片

             blur: true,            // 设置加载大图是否有模糊变清晰的效果

             // 语言设置

             left: '左旋转',        // 左旋转按钮文字

             right: '右旋转',        // 右旋转按钮文字

             source: '看原图'        // 查看原图按钮文字

         });

     });

 </script>
 
可直接运行代码：
 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>artZoom</title>

         <link rel="stylesheet" type="text/css" href="css/jquery.artZoom.css"/>

         <script src="js/jquery-1.7.2.min.js"></script>

         <script src="js/jquery.artZoom.js"></script>

         <script type="text/javascript">

             jQuery(function ($) {

                 $('.artZoom').artZoom({

                     path: './images',    // 设置artZoom图片文件夹路径

                     preload: true,        // 设置是否提前缓存视野内的大图片

                     blur: true,            // 设置加载大图是否有模糊变清晰的效果

                     // 语言设置

                     left: '左旋转',        // 左旋转按钮文字

                     right: '右旋转',        // 右旋转按钮文字

                     source: '看原图'        // 查看原图按钮文字

                 });

             });

         </script>

     <style type="text/css">

         .artZoom {

             padding: 3px;

             background: #FFF;

             border: 1px solid #EBEBEB;

         }

         body {

             font-size: 75%;

             font-family: '微软雅黑';

             padding-bottom: 200px;

         }

         img {

             border: 0 none;

         }

         #demo {

             width: 540px;

             padding: 5px;

             background: #FBFCFD;

         }

     </style>

     </head>

     <body>

         <div id="demo" class="text-center">

             <a href="images/01.jpg"><img class="artZoom" src="data:images/01m.jpg"/></a>

         </div>

     </body>

 </html>

完！

 
 
 
 
 
 

artZoom 图片可放大旋转的更多相关文章

  1. JS控制图片拖动 放大 缩小 旋转 支持滚轮放大缩小 IE有效

    <html> <head>     <title>图片拖动,放大,缩小,转向</title> <script type="text/ja ...

  2. Android DIY之路 （一） 指定区域多图片合成 放大 缩小 镜像 旋转 等（转）

    惯例先看效果图 // 注意做类似这种模板功能时候 方位由后台数据提供,这里我们用假数据 4个点 或者xy 加区域来做示例 //一开始我们公司用的是透明盖住 操作图片 但发现 局限性较大.后来直接限定区 ...

  3. Android------实现图片双击放大，缩小，左右滑动的多种方式

    项目中常常有图片浏览功能.像微信朋友圈图片浏览,QQ空间照片浏览 的功能. 实现图片双击放大,缩小,左右滑动等效果. 来看看我的效果图,希望能满足你的要求   前三个button按钮是参考网上的多种实 ...

  4. css3 一个六边形 和 放大旋转动画DEMO演示

    <!DOCTYPE html> <html> <head> <meta charset="gb2312"> <title> ...

  5. canvas 图片拖拽旋转之二——canvas状态保存(save和restore)

    引言 在上一篇日志“canvas 图片拖拽旋转之一”中,对坐标转换有了比较深入的了解,但是仅仅利用坐标转换实现的拖拽旋转,会改变canvas坐标系的状态,从而影响画布上其他元素的绘制.因此,这个时候需 ...

  6. canvas 图片拖拽旋转之一——坐标转换translate

    引言 对canvas中绘制的图片进行旋转操作,需要使用ctx.translate变换坐标系,将图片旋转的基点设为坐标系的原点,然后ctx.rotate旋转. 这个时候,因为canvas坐标系发生了旋转 ...

  7. Android 本地/网路下载图片实现放大缩小

     Android 本地加载/网路下载图片实现放大缩小拖拉效果,自定义控件. package com.example.ImageViewCustom; import android.app.Activi ...

  8. Android 图片的放大缩小拖拉

    package com.example.ImageView; import android.annotation.SuppressLint; import android.content.Contex ...

  9. JS中图片的放大缩小没反应

    这段代码无反应: 代码如下: <script type="text/javascript"> onload = function () { document.getEl ...

随机推荐

  1. 转载:【Oracle 集群】RAC知识图文详细教程(八)--Oracle 11G RAC数据库安装

    文章导航 集群概念介绍(一) ORACLE集群概念和原理(二) RAC 工作原理和相关组件(三) 缓存融合技术(四) RAC 特殊问题和实战经验(五) ORACLE 11 G版本2 RAC在LINUX ...

  2. asp.net(c#)开发中的文件上传组件uploadify的使用方法（带进度条）

    上文件传很常见,现在就文件上传利用HTML的File控件(uploadify)的,这里为大家介绍一下(uploadify)的一些使用方法.在目前Web开发中用的比较多的,可能uploadify(参考h ...

  3. Sizzle源码分析：二 词法分析

    上一篇我们了解了Sizzle的整体流程,下面我开始一点点分析各个流程,我们进行查询的第一步就是词法分析tokenize,同样先了解下思路,如果是#div_test > span input[ch ...

  4. 【LeetCode 38_字符串_算术运算】Count and Say

    string countAndSay(int n) { string res; ) return res; res = "; ) { int len = res.size(); int i, ...

  5. New Concept English Two 20 52

    $课文50  乘车兜风 510. I love travelling in the country, but I don't like losing my way. 我喜欢在乡间旅行,但却不愿意迷路. ...

  6. Linux 进程、线程运行在指定CPU核上

    /******************************************************************************** * Linux 进程.线程运行在指定 ...

  7. Git 将代码恢复到一个历史的版本

    Git 将代码恢复到一个历史的版本 要把代码回到某个历史版本 比如 test有两种方法 暴力的方式 如果你的仓库是自己在用(不影响别人),那么你可以使用 git reset --hard <ta ...

  8. 数据库数据——>文件xml

    xml文件格式 <smss> <sms> <data> </data> </sms> </smss> 这里面的意思是将数据库里面 ...

  9. ACdream区域赛指导赛之手速赛系列(2)

    版权声明:本文为博主原创文章.未经博主同意不得转载. https://blog.csdn.net/DaiHaoC83E15/article/details/26187183        回到作案现场 ...

  10. WinSCP一个好用的连接linux服务器的

    用虚拟机ssh登陆远程服务器,终端命令copy本地文件到服务器简直弱爆了. 不然用win下的WinSCP,牛逼到爆了.操作跟FTP软件差不多