代码如下：

<!DOCTYPE html> 
<html lang="en"> 
   <head> 
      <meta charset="utf-8" />
        <!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
       Remove this if you use the .htaccess -->
       <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
        <title>e-smartdev : pan and zoom plugin</title>
       <meta name="description" content="" /> 
      <meta name="author" content="damien" /> 

       <!--<meta name="viewport" content="width=device-width; initial-scale=1.0" />--> 
       <!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references --> 
      <link rel="shortcut icon" href="/favicon.ico" />
       <link rel="apple-touch-icon" href="/apple-touch-icon.png" />  
     <link rel="stylesheet" href="styles.css" type="text/css" /> 
      <script src="../src/jquery-1.11.0.min.js"></script>
       <script src="../src/e-smart-zoom-jquery.min.js"></script>
        <script>
          $(document).ready(function() {
                          $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
              $('#zoomInButton,#zoomOutButton').bind("click", zoomButtonClickHandler);
              function zoomButtonClickHandler(e){
                 var scaleToAdd = 0.8;
                if(e.target.id == 'zoomOutButton')
                   scaleToAdd = -scaleToAdd;
                $('#imageFullScreen').smartZoom('zoom', scaleToAdd); 
             }
          }); 
      </script>
    </head> 
   <body>  
      <div id="page">
          <div id="pageContent">
             <div id="imgContainer">
                <img id="imageFullScreen" src="assets/zoomFullScreen.jpg"/> 
            </div>
             <div id="positionButtonDiv">
                   <span> 
                     <img id="zoomInButton" class="zoomButton" src="assets/zoomIn.png" title="zoom in" alt="zoom in" />
                      <img id="zoomOutButton" class="zoomButton" src="assets/zoomOut.png" title="zoom out" alt="zoom out" />
                   </span> 
            </div> 
         </div>
       </div>
    </body> </html> 
效果图如下：

图片放大缩小插件 zoom.js 怎么用的更多相关文章

  1. 图片放大缩小的zoom.js

    1 +function ($) { "use strict"; 2 3 /** 4 * The zoom service 5 */ 6 function ZoomService ( ...

  2. PhotoSwipe-一个好用的图片放大缩小插件

    通过GitHub 下载PhotoSwipe https://github.com/dimsemenov/PhotoSwipe 相关的库 <link rel="stylesheet&qu ...

  3. vue项目 一行js代码搞定点击图片放大缩小

    一行js代码搞定xue项目需要点击图片放大缩小,其实主要用的是用到了vue:class的动态切换,内容比较简单.一开始我把维护的需求想得太复杂了,和测试小姐姐聊了一下才反应过来. 两个月不到跟了四个项 ...

  4. hammer使用: 代码：捏合、捏开、图片放大 的一个手机图片“放大缩小可拖动”的小效果

    hammer.js 的使用. (手机手势插件) 捏合.捏开.图片放大 的一个手机图片“放大缩小可拖动”的小效果. 相关js 到 http://www.bootcdn.cn/  查找和下载. hamme ...

  5. 鼠标滚轮图片放大缩小功能，使用layer弹框后不起作用

    今天在项目中遇到的一个问题:点击按钮使用layer弹框弹出一张图片,需要加一个鼠标滚轮放大缩小,图片也跟着放大缩小的功能.于是在网上找了一个demo. DEMO: <!DOCTYPE html ...

  6. javascript仿新浪微博图片放大缩小及旋转效果

    javascript仿新浪微博图片放大缩小及旋转效果 经常看到新浪微博里有图片放大缩小旋转效果,感觉效果还不错,所以就想试着做一个类似的demo出来,至于旋转对于IE可以用滤镜来解决,标准的浏览器可以 ...

  7. 自定义mousewheel事件，实现图片放大缩小功能实现

    本文是承接 上一篇的<自定义鼠标滚动事件>  的基础上实现的,建议大家先看一下上一篇的mousewheel的实现,再浏览下文: 上篇中我们介绍到: $element.mousewheel( ...

  8. imageView图片放大缩小及旋转

    imageView图片放大缩小及旋转 一.简介 二.方法 1)设置图片放大缩小效果 第一步:将<ImageView>标签中的android:scaleType设置为"fitCen ...

  9. wpf下的图片放大缩小

    WPF下实现图片的放大缩小移动   在windows 7里面有自带的图片查看器,这个软件可以打开一张图片然后以鼠标在图片中的焦点为原点来进行缩放,并且放大后可以随意拖动.下面我们在WPF中实现这个功能 ...

随机推荐

  1. Python turtle库绘制简单图形

    一.简介 Python中的turtle库是一个直观有趣的图形绘制函数库.turtle库绘制图形有一个基本框架:一个小海龟在坐标系中爬行,其爬行轨迹形成了绘制图形. 二.简单的图形列举 1.绘制4个不同 ...

  2. 写论文与PPT汇报时matlab图片的背景透明处理

    不少同学在使用Word写论文时,将matlab生成的图保存为jpg格式,然后粘贴到文档中.word背景为纯白色,jpg图的缺点没有显示,实际上会存在很大白边,以及放大后不清晰的问题,很影响PPT展示和 ...

  3. 痞子衡嵌入式：飞思卡尔i.MX RTyyyy系列MCU硬件那些事（1）- 官方EVK简介

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是飞思卡尔i.MX RTyyyy系列MCU的配套EVK板. 半导体设计厂商发布任何一块MCU芯片新品,一般都会同步推出基于这款MCU的配套 ...

  4. Python学习-迭代器、生成器

    一.迭代器 1. 可迭代对象 我们知道字符串.列表.元组.字典.集合都可以使用for语句进行循环遍历,然后输出每一个元素,这些都是可迭代对象. 检查对象是否是可迭代对象可以用两种方式去判断: (1)使 ...

  5. java算法基础范例

    题目1:古典问题:有一对兔子,从出生后第3个月起每个月都生一对兔子,小兔子长到第三个月后每个月又生一对兔子,假如兔子都不死,问每个月的兔子总数为多少?  1.程序分析: 兔子的规律为数列1,1,2,3 ...

  6. 导出 mysql 数据到 redis

    决定你要导入到 redis 的数据类型 假设我的表 t_user 的结构为 列名 注释 类型 name 名称 varchar idcard 身份证号 varchar phone 手机号 varchar ...

  7. JAVASE知识点总结（四）

    第十七章:内部类和枚举 一.内部类 1.什么是内部类? 2.为什么要有内部类? 3.内部类的种类: 5.实例内部类 6.创建实例内部类 7.实例内部类注意点 8.访问变量原则: 4 9.静态内部类: ...

  8. Maven 梳理-自动创建Maven项目（非web）

    mvn archetype:create和mvn archetype:generate create is deprecated in maven 3.0.5 and beyond,在maven3.0 ...

  9. 阿里云安装RocketMQ

    说明: 我的阿里云是centos 6.9 jdk 1.8.0_192-b12(安装教程参照:https://www.cnblogs.com/kingsonfu/p/9801556.html) mave ...

  10. locate，find

    locate:非实时查找,模糊匹配,查找是根据全系统文件数据库进行的,可以使用updatedb命令来手动生成数据库 find:实时查找,精确匹配,支持众多查找标准,遍历指定目录中的所有文件完成查找,速 ...