UI | 输入 | 媒体 | 导航 | 其他 | 网页模板| APP模板| 常用代码| 在线代码

jQuery放大镜插件jqzoom.js

所属分类：媒体-图像

 101517  435  查看评论 (54)
分享到微信朋友圈
X
jQuery放大镜插件jqzoom.js ie兼容6
 查看演示  立即下载

jqzoom是一款基于jQuery的图片方法插件。

使用方法：

1.引入jQuery与jqzoom,jqzoom.css

2.准备两张一大一小大小相同的图片，小图片放在<img>标签的"src"属性里，给img标签加个<a>标签，<a>标签的"href"属性链向大图片

参数说明：

zoomWidht:　　小图片所选区域的宽度。

zoomHeight:　  小图片所选区域的高度。

zoomType:　　 默认值为standard。如果设为reverse，在小图片仲，移入鼠标时，所选区域高亮，非选中区域淡灰色。

xOffset:　　　　放大后的图片与小图片间的X(横坐标)距离。

yOffset:　　　　放大后的图片与小图片间的Y(纵坐标)距离。

position:　　　  放大后的图片相对原图片的位置，默认为"right",还可设置为"left","top","bottom"。

lens:　　　　　　布尔值，表示是否显示小图片中的选中区域，默认值为"true",如果设为"false"，则放大后的图片上面不会出现主题字样。

imageOpacity:　当zoomType的值为"reverse"时，用来设置非选中区域透明度的值。取值范围在(0.0-1.0)间。

preloadImages：布尔值，表示是否重新加载大图像。

preloadText：　 重新加载大图像时，小图像显示的文本说明。

title：　　　　　 大图像顶部是否显示<a>标签里的title。

showEffect:　　 大图像加载时的特效，可选值:"show"表示直接显示，"fadein"由透明度渐变载入效果。

hideEffect：　　 大图像隐藏特效，可选值："hide"表示直接隐藏，"fadeout"透明度渐变隐藏。　　

fadeinSpeed:　　当大图像的载入特效设为"fadein"时，此属性可设置特效的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

fadtoutSpeed:　 当大图像的隐藏特效设为"fadeout"时，此属性可设置特效载的时间，可选值为'fast','slow',number分别代表，快慢，毫秒数。

相关插件-图像
查看更多

html5前端图片压缩

 html5前端图片压缩
  图像
 85083  454

可视化的交互图形库Cytoscape.js

 Cytoscape.js ? 用于数据分析和可视化的交互图形库
  图像
 53878  343

移动端图片滤镜效果

 在手机上常用到的图片滤镜效果
  图像
 28911  385

svgmap地图

 svgmap实现中国地图。
  图像
 61368  492

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

    风 0
    2019/5/23 10:40:38
    这个插件怎么用啊,有大佬发代码出来吗 回复
    随意 0
    2019/3/21 9:55:23
    第一，有bug，第二不支持放大倍数，第三，已经不更新了
        走位太6容易闪着腰? ??0
        2019/4/19 17:46:32
        ,,,
    回复
    柚夏 0
    2018/11/29 18:59:13
    怎么获得积分 有没有大佬知道
        多啦曾经不懂a梦0
        2019/1/11 19:15:12
        发布资源、回答他人提问、分享插件使用方法奖励jQ币，或者直接 充值!
    回复
    千恒建站-吕卉 0
    2018/9/12 14:03:16
    为什么我的一张图片上有一张小图片，放大的是小图片，怎么放上面的小图片和底下的图片一样大啊 回复
    沐流光 0
    2018/6/11 15:51:40
    这个要怎么实现 放大后的图片纵坐标随着鼠标移动 因为我的项目图片比较大 一直显示在最上面的话 会看不到放大后的图片
        孟婆的碗0
        2018/6/29 10:31:03
        不知道
        末小染.0
        2018/9/3 22:57:14
        可以去csdn官网查一下
    回复
    沐流光 0
    2018/6/8 15:55:54

    高版本兼容是这样引入吗 还是报错

        西瓜0
        2018/6/8 15:59:17

        这样作，注意顺序

        <script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
<script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
        沐流光0
        2018/6/11 9:35:36
        可以了 谢谢
    回复
    沐流光 0
    2018/6/8 15:39:13
    为什么只有引入JQ1.几版本的可以正常工作 引入jq2.几的时候就报错了
        孟婆的碗0
        2018/6/29 10:31:38
        兼容性问题
        潘付增0
        2019/12/12 11:04:12
        实在不么，自己写一个吧
    回复
    沐流光 0
    2018/6/7 16:43:57

    下载以后报错啊 

     jquery.jqzoom-core.js:23 Uncaught TypeError: Cannot read property 'msie' of undefined
   at jquery.jqzoom-core.js:23
   at jquery.jqzoom-core.js:720
(anonymous) @ jquery.jqzoom-core.js:23
(anonymous) @ jquery.jqzoom-core.js:720
demo_alwayson.html:46 Uncaught TypeError: $(...).jqzoom is not a function
   at HTMLDocument. (demo_alwayson.html:46)
   at c (jquery.min.js:4)
   at Object.fireWith [as resolveWith] (jquery.min.js:4)
   at Function.ready (jquery.min.js:4)
   at HTMLDocument.q (jquery.min.js:4)
        西瓜0
        2018/6/7 17:22:18

        使用高版本jQuery的问题加入jQuery版本迁移辅助插件就行了。

        <script src="http://www.jq22.com/jquery/jquery-migrate-1.2.1.min.js"></script>
        沐流光0
        2018/6/8 15:44:24

        是这样吗  可是还是报错啊

    回复
    此处为龙空 0
    2018/4/25 14:09:56
    怎么下载？
        ～开～0
        2018/10/12 10:58:05
        点击立即下载
    回复
    .hard_work_baby 0
    2017/12/18 9:19:54
查看更多评论
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • ⭐
  • 💖
  • 💔
取消回复