第一步：引入文件
 <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. Class 'SoapClient' not found 解决方法

    Class 'SoapClient' not found ? 在百度上搜了解决办法,可是收效不佳,只知道好像要添加soap扩展模块,但怎么添加却没有说.于是,我上了google.果然,查看一些英文资料 ...

  2. 在嵌入式设计中使用MicroBlaze（Vivado版本）

    原文Xilinx官方文档<ug898-vivado-embedded-design>第三章 一.MicroBlaze处理器设计介绍(略) 二.创建带有MicroBlaze处理器的IP设计 ...

  3. 此文记录了我从研二下学期到研三上学期的找工历程，包括百度、腾讯、网易、移动、电信、华为、中兴、IBM八家企业的面试总结和心得--转

    感谢电子通讯工程的研究生学长为大家整理了这么全面的求职总结,希望进入通信公司和互联网公司做非技术类岗位的学弟学妹们千万不要错过哦~ ---------------------------原文分割线-- ...

  4. Vim技能修炼教程(17) - 编译自己的Vim

    编译自己的Vim 前面我们已经对Vim有比较丰富的了解了.我们也知道Vim有很多编译时的选项,很多功能依赖于这些编译选项.其中最重要的就是脚本语言的支持,很多发行版本是不全的.为了支持我们所需要的功能 ...

  5. 新转移注意(caffe):ImportError: libcudart.so.7.0: cannot open shared object file: No such file or directory

    https://github.com/NVIDIA/DIGITS/issues/8 For this error ImportError: libcudart.so.7.0: cannot open ...

  6. Python windows serial

    Python windows serial 一.参考文章: Serial port programming http://www.cnblogs.com/2zhyi/p/3405339.html py ...

  7. Springboot使用Cookie，生成cookie，获取cookie信息（注解与非注解方式）

    先 创建一个控制类吧, 其实我没有分层啊,随便做个例子: MyGetCookieController: @RestControllerpublic class MyGetCookieControlle ...

  8. nats 学习 集群ha 配置

      nats 的ha 是一个mesh 的结构,有两个主要的参数 clusters routers 启动三分节点(单机) 共享变量 SERVERS=nats://127.0.0.1:6222,nats: ...

  9. socket编程---TCP

    服务器端先初始化Socket,然后与端口绑定(bind),对端口进行监听(listen),调用accept阻塞,等待客户端连接.在这时如果有个客户端初始化一个Socket,然后连接服务器(connec ...

  10. spring与hibernate注解及XML方式集成

    spring与hibernate注解及XML方式集成 Hibernate Xml方式 该种方式需要在sessionFactory中引入对应的hbm.xml文件,样例如下: <!-- spring ...