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

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

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

 32230  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图片放大镜

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

jQuery移动端对图片进行拖拽与旋转等操作

 选着一个背景模板 然后对图片进行拖拽或者旋转一个角度 或者放大和缩小 进行调整 然后保存下来
  图片展示
 25820  303

HTML5/CSS3超酷焦点图特效

 焦点图插件切换效果比较简单，但是外观和功能却十分强大。该CSS3焦点图在切换图片时，图片以淡入淡出的方式缩小消失并显示下一张图片。焦点图插件还拥有一套非常大气的前后翻页按钮，是一款非常实用HTML5/CSS3焦点图应用。
  图片展示
 33068  306

纯js图片旋转

 JavaScript图片特效
  图片展示
 43748  435

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