Jquery放大镜插件imgzoom能够实现图片放大的功能，便于与原图进行比较。

使用方法：

1.引入jQuery与imgzoom,imgzoom.css

  1.  <link rel="stylesheet" href="css/jquery.imgzoom.css" />
  2.  <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
  3.  <script type="text/javascript" src="dist/bundle.js" ></script>

2.插件调用

  1.  $(".main").imgzoom({position:"inner"});

参数说明：

1. position：放大图片显示的位置，包括‘inner’,'top','left','right','bottom'。

2. boxWidth：图片锁定区域框的宽度。

3. boxHeight：图片锁定区域框的高度。

4. borderRadius：图片锁定区域框的圆角弧度

5. left:当图片位置不为inner时候，left有效

6. top:当图片位置不为inner的时候，left有效

具体使用

  1.  <!DOCTYPE html>
  2.  <html>
  3.      <head>
  4.          <meta charset="UTF-8">
  5.          <title>jQuery放大镜插件imgzoom.js</title>
  6.          <meta name="description" content="jQuery放大镜插件imgzoom.js">
  7.          <meta name="keywords" content="放大镜,图片放大,jquery插件,imgzoom.js">
  8.          <link rel="stylesheet" href="css/jquery.imgzoom.css" />
  9.          <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>
  10.          <script type="text/javascript" src="dist/bundle.js" ></script>
  11.          <style>
  12.              .main {
  13.                  width: 500px;
  14.                  height: 570px;
  15.                  border: 2px solid black;
  16.                  position: relative;
  17.                  /*overflow: hidden;*/
  18.              }
  19.          </style>
  20.      </head>
  21.      <body>
  22.          <div class="main">
  23.              <img id="img1" src="img/zoom.jpg"  style="width: 100%;height: 100%;"/>
  24.  
  25.          </div>
  26.          <script>
  27.              $(".main").imgzoom({position:"inner"});
  28.          </script>
  29.      </body>
  30.  </html>

效果图

Jquery放大镜插件---imgzoom.js(原创)的更多相关文章

  1. 分享JQuery动画插件Velocity.js的六种列表加载特效

    分享JQuery动画插件Velocity.js的六种列表加载特效.在这款实例中给中六种不同的列表加载效果.分别为从上飞入.从右侧飞入.从左侧飞入.和渐显.一起看下效果图: 在线预览   源码下载 实现 ...

  2. 基于jquery的插件turn.js学习笔记

    基于jquery的插件turn.js学习笔记 简介 turn.js是一个可以实现3d书籍展示效果的jq插件,使用html5和css3来执行效果.可以很好的适应于ios和安卓等触摸设备. How it ...

  3. [原创] JavaScript 图片放大镜插件 enlarge.js 以及移动版 enlarge.touch.js

    拖拖拉拉准本了一个月,终于把网站做好了.也终于可以分享这两个插件了.这两个插件,一个是 jQuery 版本,适合鼠标使用的,另一个是原生 JavaScript 制作,适合触摸屏使用(touch 事件) ...

  4. jquery放大镜插件与样式

    这是放大镜插件链接,我已经上传到我博客http://files.cnblogs.com/valiant1882331/%E6%94%BE%E5%A4%A7%E9%95%9C%E6%8F%92%E4%B ...

  5. jQuery放大镜插件jqzoom使用

    源码下载,使用指导地址:http://www.mind-projects.it/projects/jqzoom/ 使用教程: 1.导入库文件 <script src="../js/jq ...

  6. jQuery放大镜插件

    (function($) { $.fn.magnifier = function(options){ var options = $.extend({ bigWidth: 400, //大图高度 bi ...

  7. JQuery动画插件Velocity.js发布：更快的动画切换速度

    5月3日,Julian在其GitHub上发布了Velocity.js.Velocity.js是一款动画切换的jQuery插件,它重新实现了jQuery的$.animate()方法从而加快动画切换的速度 ...

  8. 自己写的jQuery放大镜插件效果(一)(采用一张大图和一张小图片的思路)

    这个思路的方法会带来一个小问题,就是当鼠标放到小图上去时,会开始加载大图片,网速不佳的时候,会出现加载慢的情况.但是放大的效果和你所给出的大图片的清晰度是一样的. 先看效果图: html代码: < ...

  9. jquery——滚动条插件jscroll.js

    一.效果如下 点击“测试中奖纪录”弹出弹框.弹框中内容超出时显示滚动条. 二.代码部分 1.html结构 <body> <a href="javascript:;" ...

随机推荐

  1. 如何发布自己的服务---zookeeper

    人肉告知的方式:如果你发现你的服务一台机器不够,要再添加一台,这个时候就要告诉调用者我现在有两个ip了,你们要轮询调用来实现负载均衡:调用者咬咬牙改了,结果某天一台机器挂了,调用者发现服务有一半不可用 ...

  2. 超爽的Windows终端Cmder

    我们常常看到科研.军事.编程上用的计算机系统是"黑洞洞"的,没有桌面.相对我们现在使用的Windows系统,既方便又美观,那么他们怎么不用Windows一样的图形化界面呢? 告诉你 ...

  3. YY的GCD（bzoj 2820）

    Description 神犇YY虐完数论后给傻×kAc出了一题给定N, M,求1<=x<=N, 1<=y<=M且gcd(x, y)为质数的(x, y)有多少对kAc这种 傻×必 ...

  4. php validator classes

    <?php /** * 验证类 */ class Validator { /* 函数名称:isNumber 简要描述:检查输入的是否为数字 输入:string 输出:boolean */ pub ...

  5. 彻底搞定C指针－函数名与函数指针【转】

    转自:http://blog.csdn.net/a1232345/article/details/43524371 函数名与函数指针 一 通常的函数调用    一个通常的函数调用的例子://自行包含头 ...

  6. linux内核之进程的基本概念(进程，进程组，会话关系）

    进程是操作系统的一个核心概念.每个进程都有自己唯一的标识:进程ID,也有自己的生命周期.一个典型的进程的生命周期如图4-1所示. 进程都有父进程,父进程也有父进程,这就形成了一个以init进程为根的家 ...

  7. Python Challenge 第四关

    进入了第四关.只有一张图,我还是像往常一样查看源代码.果然,发现了一行注释:urllib may help. DON'T TRY ALL NOTHINGS, since it will never e ...

  8. AC日记——乘积最大 洛谷 P1018

    题目描述 今年是国际数学联盟确定的“2000――世界数学年”,又恰逢我国著名数学家华罗庚先生诞辰90周年.在华罗庚先生的家乡江苏金坛,组织了一场别开生面的数学智力竞赛的活动,你的一个好朋友XZ也有幸得 ...

  9. JNA 相关问题

    JNA 相关问题 结构体对齐问题 要注意调用的c库字段对齐方式的相关设置. #pragma pack (push,1) #pragma pack(pop) jna中提供了4种对齐方式: /** Use ...

  10. jvm 问题分析

    jmap dump:file=[文件名].dump [进程号]  生成dump root@VM-185-251-ubuntu:/opt/scripts# jmap -dump:file=three.d ...