jQuery图片缩放拖动查看插件jquery.imgZoom

所属分类:UI,媒体-弹出层,图片展示

 52294  368  查看评论 (10)
分享到微信朋友圈
X
jQuery图片缩放拖动查看插件jquery.imgZoom ie兼容9

imgZoom简介

点击图片后,出现大图,可用鼠标滚轮缩放,可以用鼠标拖动改变位置

安装

引用jquery后,引用以下3个jquery插件

  1. jquery.drag.js

  2. jquery.mousewheel.js

  3. jquery.imgZoom.js

调用方法

$("img").imgZoom();

如果img显示的是缩略图,可以把原始图链接放在data-src中,如下:

<img src="thumbnail.jpg" data-src="original.jpg">
相关插件-弹出层,图片展示

jQuery制作侧边悬浮折叠影藏弹窗特效

jQuery制作侧边悬浮折叠影藏弹窗特效
  弹出层
 40966  411

jQuery遮罩弹窗居中

jQuery遮罩弹窗始终屏幕剧中,调用简单代码少。
  弹出层
 57602  481

jquery弹出框插件dialogbox

jquery弹出框插件dialogbox
  弹出层
 53520  317

四种简单弹窗 — 自己配置弹窗

四种弹出方式,可以非常简单的通过修改css来定义自己喜欢的样式。
  弹出层
 52608  423

讨论这个项目(10)回答他人问题或分享插件使用方法奖励jQ币 评论用户自律公约

    鹏而 1
    2020/8/13 15:32:03
    点击后body为overflow:hidden,滚动条消失。可以再关闭的时候改为overflow:auto。放img的框可以改为fixed。否则在大于屏幕的页面,遮罩看不到 回复
    宁觉 1
    2018/7/21 10:29:46

    个人的解决方案:在jquery.imgZoom.js这个文件里的这个

    $(document).on("click", "#imgZoomMask", function() {}

    点击事件里,body标签css样式里,将overflow这个样式去除掉(因为在你点击图片的时候,自动帮你添加了overflow:hidden这个样式),可以这样写 

     $("body").css('overflow','');

    (个人解决方案,不喜勿喷哈~)

        努力味的小花0
        2018/8/16 11:05:47
        您这样子试了有效吗?我这里无效额..
    回复
    宁觉 0
    2018/7/21 9:45:05
    图片放大后,滚动条消失,难受啊 回复
    普明子 0
    2017/10/29 23:45:27
    是我使用有问题吗?无法实现缩放效果 回复
    Pg_Channel 0
    2017/8/23 18:42:49
    随遇而安 0
    2017/5/16 11:45:12
    h5-wu 0
    2017/5/5 15:00:58
    0
    2017/4/26 10:05:13

    放大再缩小后,网页的上下滑动失效了!!!!!!!!!!!!!!!!!!!!!

        木 偶然0
        2018/3/13 19:36:28
        我的发现了,这个问题你解决了吗?
    回复
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复