首先当然是要有jQuery库,右键另存为(jquery-1.6.1.js)
然后下载放大镜插件:右键另存为(jquery.imageLens.js)
-
<script type= "text/javascript" src= "jquery-1.6.1.js" ></script >
-
<script type= "text/javascript" src= "jquery.imageLens.js" ></script >
-
<script type= "text/javascript" language= "javascript" >
-
$ ( function ( ) {
-
$ ( "#img1" ). imageLens ( );
-
$ ( "#img2" ). imageLens ( { lensSize: 200 } );
-
$ ( "#img3" ). imageLens ( { borderSize: 8, borderColor: "#06f" } );
-
} );
-
</script ><img id="img1" src="img1.png" >
<img id="img2" src="img2.png" >
<img id="img3" src="img3.png" >
浏览效果如下:
更多有关jquery放大镜的插件可以访问 http://www.professorcloud.com/mainsite/cloud-zoom.htm