jQuery图片透视放大镜效果插件源代码下载
2016-01-28 12:51:26  By: shinyuu

分享一个jQuery透视图片放大镜代码的Demo、本事例是一款鼠标移到图片上可以在放大镜下透过上层的图片看到下层图片的放大影像、也就是说要实现透视的效果必须要准备好两张图片、同样本Demo也试用于两个美女、一个是比基尼一个穿衣服的、所以最后的效果你懂的、下面是效果图

jquery放大镜插件


引入CSS样式

<link rel="stylesheet" type="text/css" href="css/default.css">
<link rel="stylesheet" href="dist/jQuery.MagnifierRentgen.min.css">
<link rel="stylesheet" href="css/demo.css">


HTML代码

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


引入已经封装的JS

<script src="js/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="dist/jQuery.MagnifierRentgen.min.js"></script>
<script src="js/demo.js"></script>


就这样简单的三步就可以实现上图中的效果了、非常方便、喜欢的朋友可以下载源代码看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1o73TAXW 密码: 3d39

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+