jQuery放大镜插件jqzoom.js

所属分类:媒体-图像

 83979  365  查看评论 (54)
分享到微信朋友圈
X
jQuery放大镜插件jqzoom.js ie兼容6

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

使用方法:

1.引入jQueryjqzoom,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分别代表,快慢,毫秒数。

相关插件-图像

SVG图像生成插件triangloid

triangloid是一个JavaScript库,可以将图像生成为多边形图像并输出成SVG格式。它是基于trianglify
  图像
 26675  280

jQuery图片裁剪插件Cropit

Cropit 是款自定义裁剪和缩放图像的jQuery插件
  图像
 37802  294

jQuery图片裁剪插件Cropper.js

功能非常强大的图片裁剪插件Cropper.js
  图像
 21753  275

Beer Slider一款轻量级的图片对比插件

它的基本目的是比较图像的两个版本,例如在两个不同时刻拍摄的相同对象,预编辑的照片及其处理版本,草图和完成的插图等。
  图像
 19389  292

讨论这个项目(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
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复