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

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

 32096  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唯美图片Y轴展示

实现精美唯美图片Y轴展示效果
  图片展示
 38418  502

jQuery鼠标滚轮放大缩小查看图片(原创)

使用jquery实现点击放大图片之后,使用鼠标滚轮放大缩小图片,点击遮罩关闭图片
  图片展示
 60647  380

js 3D图片旋转

原生js 3D图片旋转插件
  图片展示
 35328  348

jQuery圆形转动切换文字

jQuery实现头像和文字的切换,并且伴随着圆环的转动,很有趣的效果
  图片展示
 32634  514

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