介绍一个十分好用的JQUERY图片放大镜插件

介绍一个十分好用的JQUERY图片放大镜插件

介绍一个十分好用的JQUERY图片放大镜插件,在很多电子商务网站中,有时在看小图时,往往想再看这个货品的大图,

传统的另外打开一张大图的话,不大COOL,所以找到了这个插件,

插件下载地址:

http://www.mind-projects.it/projects/jqzoom/

简单介绍下,在下载后,

要准备一张小图和一张清晰点的大图,然后在页面中引入JQUERY和这个插件的JS

<script src="../js/jquery-1.3.2.min.js" type="text/javascript"></script>

<script src="../js/jqzoom.pack.1.0.1.js" type="text/javascript"></script>

然后再引入一个CSS

<link rel="stylesheet" href="../css/jqzoom.css" type="text/css">

接着是两张大图和小图

<a href="kawasakigreen.jpg" class="jqzoom" style="" title="kawasaki">

<img src="kawasakigreen_small.jpg" border="0" style="border: 1px solid #666;" title="kawasakigreen"></a>

这里注意的是一张大图,一张小图,并且"kawasakigreen_small.jpg"这个小图中,那个title是要出现在放大镜里的文字标题

然后在JS中

<script type="text/javascript">

$(function() {

var options3 =

{

zoomWidth: 200,

zoomHeight: 200,

xOffset: 20,

title: false,

lens:false

}

$(".jqzoom").jqzoom(options3);

});

</script>

这里就是放大镜的效果了，具体的文档和例子请参考

http://www.mind-projects.it/projects/jqzoom/demos.php#demo1

posted on -12-24 23:45 jackyrong的世界 阅读(...) 评论(...) 编辑 收藏