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

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

 32666  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();


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

gifplayer暂停或播放GIF图片

gifplayer暂停或播放GIF图片
  图片展示
 34051  323

js 3D图片旋转

原生js 3D图片旋转插件
  图片展示
 36191  349

CSS3三角形图片展示

CSS3三角形图片展示
  图片展示
 41103  398

jQuery的图片浏览插件Zoomimage

该jQuery插件能够让以当前流行的方式来展示图片。提供:预加载图片提示,对图片进行分组,自动调整图片显示比例,图片分组浏览控制。
  图片展示
 53812  354

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