返回顶部

收藏

jQuery 图像缩放插件 imageLens

更多

jQuery 图像缩放插件 imageLens 教程在线演示:http://www.script- tutorials.com/demos/69/index.html放大镜效果很coool.

index.html

<link rel="stylesheet" href="css/main.css" type="text/css" />
<script src="js/jquery-1.5.2.min.js"></script>
<script src="js/jquery.imageLens.js"></script>
<script src="js/main.js"></script>

<div class="example">
    <h3><a href="#">imageLens samples</a></h3>

    <img id="img_01" src="data_images/img1.jpg" width="350" height="262" />
    <img id="img_02" src="data_images/img2.jpg" width="350" height="262" />
    <img id="img_03" src="data_images/img3.jpg" width="350" height="262" />
    <img id="img_04" src="data_images/img4.jpg" width="350" height="262" />
</div>

<div style="bottom:0;position:fixed;">
    <hr style="clear:both;" />
    <h4>
        <a href="http://www.script-tutorials.com/xxxxxxxxxxxxxx/">back to original article page</a>
    </h4>
</div>

css/main.css

body{background:#eee;margin:0;padding:0}
.example{background:#FFF;width:800px;border:1px #000 solid;margin:20px auto;padding:15px;-moz-border-radius: 3px;-webkit-border-radius: 3px}
.example img {margin:22px}

js/main.js

$(document).ready(function(){
    $('#img_01').imageLens(); // default initialization
    $('#img_02').imageLens({ lensSize: 200 }); // set lens size
    $('#img_03').imageLens({ lensSize: 200, imageSrc: 'data_images/img5.jpg' }); // lens size + custom image
    $('#img_04').imageLens({ borderSize: 8, borderColor: '#f00' }); // new border size and color
});

js/jquery-1.5.2.min.js and js/jquery.imageLens.js

js/jquery-1.5.2.min.js and js/jquery.imageLens.js
//在包中

图片

imgs/asCode/09134637_8A4K.jpg

图片

imgs/asCode/09134637_2Bfp.jpg

图片

imgs/asCode/09134637_M6QK.jpg

图片

imgs/asCode/09134637_Bjpe.jpg

图片

imgs/asCode/09134637_wOSp.jpg

标签:jQuery,ImageLens

收藏

0人收藏

支持

0

反对

0

发表评论