jQuery图片放大镜带您体验神奇的透视效果

所属分类:媒体-图片展示,图像

 31094  382  查看评论 (7)
分享到微信朋友圈
X
jQuery图片放大镜带您体验神奇的透视效果 ie兼容6

使用该放大镜插件需要引入jQuery和jQuery.MagnifierRentgen.min.js以及jQuery.MagnifierRentgen.min.css文件。

<link rel="stylesheet" href="dist/jQuery.MagnifierRentgen.min.css">
<script src="js/jquery.min.js"></script>
<script src="dist/jQuery.MagnifierRentgen.min.js"></script>


HTML结构

该放大镜插件有2个图层,上面的为原图,使用data-image属性来指定,下面的是放大的图片,使用data-image-zoom属性来指定。

<div class="test-plugin"
  data-image="img/msi.jpg"
  data-image-zoom="img/msi-open.jpg"
  data-size="100"></div>
</div>


初始化插件

在页面DOM元素加载完毕之后,可以通过magnifierRentgen()方法来初始化该图片放大镜插件。

$(".test-plugin").magnifierRentgen();


相关插件-图片展示,图像

jQuery仿淘宝评论区

jQuery仿淘宝评论区图片放大预览
  图片展示
 15462  219

jQuery图片放大镜

实现如京东等网站放大缩小效果
  图片展示
 26203  317

jQuery点击图片预览并显示详情

jQuery点击图片预览并显示详情,加入购物车,适合简单的商城系统
  图片展示
 50144  693

图片点击放大并居中显示

纯js实现的一个图片点击放大并居中显示的插件,支持自定义图片详情,可作为图片浏览插件,也可自行改写
  图片展示
 52371  356

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

    谎言花开 0
    2016/9/2 11:09:00
    有bug 当鼠标移出图片在移回去的时候,放大镜的透明度会变高,几次之后放大镜就完全不见了………… 回复
    魔灵 0
    2016/8/3 17:08:45
    厉害啊
        虾米0
        2017/10/3 16:20:41

        6

    回复
    0
    2016/4/22 18:04:39
    Mocmot 0
    2016/1/25 2:01:18

    然而透视效果,就是普通的放大镜... (放大镜的原理就是,背景是缩略图,放大是原图)

        ╃?芯ビ0
        2017/7/5 16:36:41
    回复
    陈三少 0
    2016/1/17 9:01:24
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
😃
  • 😀
  • 😉
  • 😥
  • 😵
  • 😫
  • 😘
  • 😡
  • 👍
  • 🌹
  • 👏
  • 🍺
  • 🍉
  • 🌙
  • 💖
  • 💔
取消回复