第一步：引入文件
 <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. 003PHP文件处理——目录操作:rename scandir

    <?php //目录操作:rename scandir /** * 修改目录名字: * rename('旧名字','新名字') 改变文件夹或者文件的名称 */ //var_dump(rename ...

  2. poj 3744 概率dp 快速幂 注意排序 难度:2

    /* Scout YYF I Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 5304   Accepted: 1455 De ...

  3. Faces人脸识别项目简介

    Faces人脸识别 分为两个模块,Faces文件夹下存放人脸识别算法的代码,Web文件夹下存放网站搭建的代码 详情请查看各个模块下的readme文档 项目简介 核心算法 一款基于Dlib.opencv ...

  4. 我的octopress配置

    在github上用octopress搭建了自己的blog,octopress号称是"专门给黑客打造的博客(A blogging framework for 把hackers)",使 ...

  5. Property 'submit' of object #<HTMLFormElement> is not a function

    <form action="" type="get" id="form"> <input type="butto ...

  6. java创建类的5种方式

    1.使用new关键字 } → 调用了构造函数 这种方式,我们可以调用任意的构造函数(无参的和带参数的). 2.使用Class类的newInstance方法 } → 调用了构造函数 使用Class类的n ...

  7. asp.net textbox等服务器控件包含html代码的时候，提交会报错

    asp.net  textbox等服务器控件包含html代码的时候,提交会报错,页面中的其他按钮点击的时候也会报错误, 解决方法: Page里加上这个属性 ValidateRequest=" ...

  8. Vue3.0代理的设置

    1.在主目录下创建vue.config.js 内容如下: const path = require('path'); function resolve (dir) { return path.join ...

  9. Nginx 设置rewrite规则是遇到的一个{}大括号引发的报错问题

    一个群友提到: 用nginx image_filter模块裁图,用!拼宽高能够实现,现在想用参数传宽高总是报错,配置如下:   location ~ ^/images/.* {     if ( $q ...

  10. Spring学习-学习路线

    Spring的IOC Spring的AOP , AspectJ Spring的事务管理 , 三大框架的整合