当前位置:首页 » jQuery » jqzoom放大镜
jqzoom放大镜
来自:新思时间:2010-06-13 08:36:00
代码下载

效果图:


1) 在页面中引入jqzoom.css 文件
<link rel="stylesheet" href="your_path/jqzoom.css" type="text/css" media="screen">

2) 在页面中引入jQzoom.js 和 jQuery.js 文件
<script type="text/javascript" src="your_path/jquery.js"></script>
<script type="text/javascript" src="your_path/jquery.jqzoom.js"></script>

3) 为图片创建一个容器,并给容器添加 jqzoom 属性,为每一个图片指定一个jqimg 属性,用来指向大图片的路径
<div class="jqzoom"><img src="images/shoe4_small.jpg" alt="shoe" jqimg="images/shoe4_big.jpg"></div>

4) 页面加载
$(document).ready(function(){
   $(".jqzoom").jqueryzoom();
});
你也可以指定一些参数

$(document).ready(function(){
$(".jqzoom").jqueryzoom({
xzoom: 300,   //zooming div default width(default width value is 200)
yzoom: 300,   //zooming div default width(default height value is 200)
offset: 40,   //zooming div default offset(default offset value is 10)
position: "right", //zooming div position(default position value is "right")
preload: 1    , // preload of images :1 by default
lens:1    // lens over the image   1 by default
});
});
关键词:jQuery,放大镜