代码如下：

<!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. 使用broker进行Datagurd主备切换报ORA-12514异常

    在使用Datagurd broker进行Datagurd主备切换时报ORA-12514监听异常, 详细信息如下: DGMGRL> switchover to xiaohe; Performing ...

  2. Spring框架学习笔记（1）——控制反转IOC与依赖注入DI

    Spring框架的主要作用,就是提供了一个容器,使用该容器就可以创建并管理对象.比如说Dao类等,又或者是具有多依赖关系的类(Student类中包含有Teacher类的成员变量) Spring有两个核 ...

  3. 03爬虫-requests模块基础(1)

    requests模块基础 什么是requests模块 requests模块是python中原生基于网络模拟浏览器发送请求模块.功能强大,用法简洁高效. 为什么要是用requests模块 用以前的url ...

  4. Linux 修改 ls 时间显示格式

    [root@CentosTe tmp]# export TIME_STYLE='+%Y-%m-%d %H:%M:%S'[root@CentosTe tmp]# ll总计 24-rwx------ 1  ...

  5. 用Python构造ARP请求、扫描、欺骗

    目录 0. ARP介绍 1. Scapy简述 2. Scapy简单演示 2.1 安装 2.2 构造包演示 2.2.1 进入kamene交互界面 2.2.2 查看以太网头部 2.2.3 查看 ICMP ...

  6. Python爬虫（二）：Requests库

    所谓爬虫就是模拟客户端发送网络请求,获取网络响应,并按照一定的规则解析获取的数据并保存的程序.要说 Python 的爬虫必然绕不过 Requests 库. 1 简介 对于 Requests 库,官方文 ...

  7. phpexcel来做表格导出（多个工作sheet）及设置单元格格式

    <?php /** * 简单实用Execl */ set_include_path('.'.get_include_path().PATH_SEPARATOR.dirname(__FILE__) ...

  8. dede tag标签静态化

    看回那2个文件夹即可,txt说明书我已经修改过. 下面说一下tag标签静态化之后在内容页.列表页中如何使用. 内容页中沿用之前的方法即可: {dede:tag sort='new' getall='0 ...

  9. 死磕 java线程系列之自己动手写一个线程池

    欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. (手机横屏看源码更方便) 问题 (1)自己动手写一个线程池需要考虑哪些因素? (2)自己动手写 ...

  10. win10下使用Linux命令

    下载Cygwin安装包 官网下载地址:https://cygwin.com/install.html 执行下载好的安装程序 选择默认安装路径C:\cygwin64即可,可在C:\cygwin64\bi ...