第一步：引入文件
 <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. 最短路之SPFA算法

    部分来自:http://blog.csdn.net/juststeps/article/details/8772755 求最短路径的算法有许多种,除了排序外,恐怕是OI界中解决同一类问题算法最多的了. ...

  2. JS之replace

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  3. [转载]java正则表达式

    转载自:http://butter.iteye.com/blog/1189600 1.正则表达式的知识要点1.正则表达式是什么?正则表达式是一种可以用于模式匹配和替换的强有力的工具.2.正则表达式的优 ...

  4. ubuntu16.04 NVIDIA CUDA8.0 以及cuDNN安装

    下载CUDA 官网下载按照自己的实际情况进行选择,下载合适的版本. 官方安装指南 注意这里下载的是cuda8.0的runfile(local)文件. 安装CUDA 下载完成后,解压到当前目录,切换到该 ...

  5. 【解决】Android 2.x 不支持overflow、position:fixed解决方案【转】

    Android 2.x和IOS5以下都不支持overflow:auto属性(position:fixed也不支持). 移动端浏览器兼容性和PC端相比,有过之而无不及.操作系统版本及各式浏览器和各式的屏 ...

  6. Life Cycle(JSF+Facelets)

    一.JSF Life Cycle: 图1 图2 应用程序的生命周期是指应用程序的各个阶段,从开始到结束.所有应用程序的生命周期.在web应用程序生命周期中,执行常见任务,包括以下内容.■处理传入的请求 ...

  7. java远程下载文件到本地

    方法一 ** * 下载远程文件并保存到本地 * * @param remoteFilePath-远程文件路径 * @param localFilePath-本地文件路径(带文件名) */ public ...

  8. L180

    The cylinder is a crucial part of the washing machine His debonair dismissal of my inquiry concernin ...

  9. WebGL编程指南案例解析之绘制一个点

    <!DOCTYPE html> <html> <head> <title>webgl</title> <style type=&quo ...

  10. 本地代码同步到github

    1 设置 ssh 公钥信息 首先你要确保 github 账号设置了ssh 公钥信息.如果没有的话可以按照下面的方式设置: 前往 github 网站的 account settings, 依次点击 Se ...