第一步：引入文件
 <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. iOS-----使用GCD实现多线程

    使用GCD实现多线程 GCD的两个核心概念如下: 队列 队列负责管理开发者提交的任务,GCD队列始终以FIFO(先进先出)的方式来处理任务---但 由于任务的执行时间并不相同,因此先处理的任务并一定先 ...

  2. 解决Apache下生成静态页面乱码的问题

    我的空间存放在阿里云,服务器默认Apache编码设置为utf-8,而新的网站珠宝招聘网http://hr.izuans.com 采用GB2312编码,其他程序文件都OK,就是生成静态新闻页和其他单页面 ...

  3. 关于Eclipse

    Navigator窗口 之前看到同事使用Eclipse的Navigator窗口,十分不解这个窗口有啥用:今天通过了解才知道Package Explorer是从工程的角度来显示文件,比如settings ...

  4. Java中return的语句

    1.return语句的作用:a.返回一个值,这个值可以是任意类型.b.使程序返回到操作系统(即终止程序)2.java中对于一个函数,不论有没有返回值类型,都可以带有return 语句.但是区别在于,r ...

  5. emacs之配置4，颜色插件

    来自https://github.com/oneKelvinSmith/monokai-emacs/blob/master/monokai-theme.el monokai-theme.el ;;; ...

  6. Data_Structure04-树

    一.学习总结 1.树结构思维导图 2.树结构学习体会 树结构,从字面上的意思来看,可以简单的理解为数据像一棵树一样展开存储.在学习本章的内容中,一开始只是理解了概念,在真正做题中,一点思路都没有,不知 ...

  7. scrollTop、offsetHeight和offsetTop等属性用法详解--转转转

    scrollTop.offsetHeight和offsetTop等属性用法详解: 标题中的几个相关相关属性在网页中有这大量的应用,尤其是在运动框架中,但是由于有些属性相互之间的概念比较混杂或者浏览器兼 ...

  8. request 里面参数设置 (有空瞄下)

    Requests 是用python语言编写的第三方库,基于 urllib,采用 Apache2 Licensed 开源协议的 HTTP 库.它比 urllib 更加方便,完全满足 HTTP 测试需求, ...

  9. mysql-13处理重复数据

    1.防止表中出现重复数据 在mysql数据表中设置指定的字段为主键或唯一索引来保证数据的唯一行. -- 方法1:指定主键 create `table person_tbl`( `first_name` ...

  10. python + docker, 实现天气数据 从FTP获取以及持久化（二）-- python操作MySQL数据库

    前言 在这一节中,我们主要介绍如何使用python操作MySQL数据库. 准备 MySQL数据库使用的是上一节中的docker容器 “test-mysql”. Python 操作 MySQL 我们使用 ...