欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  技术分享

jQuery图片透视放大镜效果插件源代码下载

程序员文章站 2022-03-01 12:36:43
...

分享一个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