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

使用方法：

1.引入jQuery与imgzoom,imgzoom.css

 <link rel="stylesheet" href="css/jquery.imgzoom.css" />

 <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>

 <script type="text/javascript" src="dist/bundle.js" ></script>

2.插件调用

 $(".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有效

具体使用

 <!DOCTYPE html>

 <html>

     <head>

         <meta charset="UTF-8">

         <title>jQuery放大镜插件imgzoom.js</title>

         <meta name="description" content="jQuery放大镜插件imgzoom.js">

         <meta name="keywords" content="放大镜,图片放大,jquery插件,imgzoom.js">

         <link rel="stylesheet" href="css/jquery.imgzoom.css" />

         <script type="text/javascript" src="src/jquery-1.11.0.js" ></script>

         <script type="text/javascript" src="dist/bundle.js" ></script>

         <style>

             .main {

                 width: 500px;

                 height: 570px;

                 border: 2px solid black;

                 position: relative;

                 /*overflow: hidden;*/

             }

         </style>

     </head>

     <body>

         <div class="main">

             <img id="img1" src="img/zoom.jpg"  style="width: 100%;height: 100%;"/>

         </div>

         <script>

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

         </script>

     </body>

 </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. 【bzoj3098】Hash Killer II 生日悖论

    这天天气不错,hzhwcmhf神犇给VFleaKing出了一道题:给你一个长度为N的字符串S,求有多少个不同的长度为L的子串.子串的定义是S[l].S[l + 1].… S[r]这样连续的一段.两个字 ...

  2. 说说IO（一）- IO的分层

    IO性能对于一个系统的影响是至关重要的.一个系统经过多项优化以后,瓶颈往往落在数据库:而数据库经过多种优化以后,瓶颈最终会落到IO.而IO性能的发展,明显落后于CPU的发展.Memchached也好, ...

  3. Docker部署注册中心、Docker创建私有镜像库、自签名证书、Deploy a registry server

    这是我在内部部署Docker Registry时记录下来的笔记,操作环境是Centos 7.Docker 18.06.1-ce 1.运行registry 我当前所使用的主机的IP是192.168.1. ...

  4. Redis Cluster 集群的实现和管理

    系统环境 CentOS 7 集群规划 在一台物理机(实际部署应当分散到多个物理机上),创建6个Redis节点,其中3个主节点.3个从节点. 节点表: IP 端口 主从 路径 192.168.1.21 ...

  5. P1340 送礼物

    时间: 1000ms / 空间: 131072KiB / Java类名: Main 描述 作为惩罚,GY被遣送去帮助某神牛给女生送礼物(GY:貌似是个好差事)但是在GY看到礼物之后,他就不这么认为了. ...

  6. 【CF173B】Chamber of Secrets（二分图，最短路）

    题意:给你一个n*m的地图,现在有一束激光从左上角往右边射出,每遇到‘#’,你可以选择光线往四个方向射出,或者什么都不做,问最少需要多少个‘#’往四个方向射出才能使关系在n行往右边射出. 思路:将每一 ...

  7. js函数的四种调用方式以及对应的this指向

    一.函数调用,此时this是全局的也就是window 1 var c=function(){ 2 alert(this==window) 3 } 4 c()//true 二.方法调用 var myOb ...

  8. 【MFC】设置窗口焦点

    BOOL CTMSDlg::OnInitDialog() { ...... ...... //设置窗口焦点,注意return TRUE 改成 return FALSE GetDlgItem(IDC_E ...

  9. 在4418平台上如何配置GPIO口的状态

    硬件 ------------------------------------------------------------------------------------------------- ...

  10. 无法安装64位版本的visio/office，因为在您的PC上找到了以下32位程序的解决办法

    解决方案:按下win+R键,打开运行,输入regedit,打开注册表,依次定位到 HKEY_CLASSES_ROOT\Installer\Products,展开Products后  将这些“00005 ...