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. Python [拷贝copy / 深度拷贝deepcopy] | 可视化理解

    Python 是一门面向对象的语言, 在Python一切皆对象. 每一个对象都有由以下三个属性组成: ------------------------------------------------- ...

  2. es6总结（十二）--generator

  3. 关于toggle的用法

    //一个关于鼠标点击 切换场景的代码段 $(document).on('click', '.create-advice-elseparm', function () { $('.advice-else ...

  4. 微信小程序 之wx.getLocation()获取地理信息中的小坑

    提到wx.getLocation()这个方法,大家都知道是获取地理信息的 今天用这个方法获取定位经纬度后传给后台取得附近markers标记集合, 在开发工具上都正常有标记出现 ,但是在手机测试时,死活 ...

  5. [笔记][FPGA]如何使用SignalTap观察wire与reg值

    0. 简介 在FPGA程序调试时,我们除了仿真还经常的会用到SignalTap进行板级调试,其可以真实有效的反应某些变量的变化,方便我们理解内在跳转,方便Debug的运行.SignalTap需要制定时 ...

  6. git常用语句

    1.安装git,也适用于升级 yum -y install gcc zlib-devel openssl-devel curl-devel \ expat-devel gettext-devel pe ...

  7. LightOj 1215 Finding LCM

    Discription LCM is an abbreviation used for Least Common Multiple in Mathematics. We say LCM (a, b, ...

  8. 转： svn服务器路径名修改（不需要全部重新拉取文件）

    svn路径名修改之后, 一大波的研发代码都可能面临变更.还有有一个svn relote神器 大家可以借助各自的SVN工具中哦relote命令完成路径的切换,而不需要全部重新download所有的新路径 ...

  9. POJ 3978（求素数）

    知识点:      1.求素数的test,从2~sqrt(n):           2.假设数据非常多,能够用素数表记录,然后sum=prime[m]-prime[n]求得! ! !! !!! !! ...

  10. python（4）- 简单练习：python实现购物车的优化

    购物车程序优化题目要求: 1. 用户退出时打印商品列表时,按以下格式 -------您购买的商品如下------ id    商品    数量    单价    总价 1      iPhone 2  ...