使用jqzoom来实现图片放大镜的效果

1.必备条件

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

<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>

2.

<script language="javascript" type="text/javascript">
$(function() {
var option={
title:true,//显示小图标题
zoomType:'reverse',//默认的’standard’和’reverse’,reverse的作用是给小图上面加上半透明的遮罩层
zoomWidth: 250,//大图的宽度
zoomHeight: 250,//大图的高度
xOffset:10,//与下面的position属性是关联的，为所在位置的偏移量
yOffset: 0, //与下面的position属性是关联的，为所在位置的偏移量
position: "right" ,//大图窗口出现的位置（相对于小图）
preloadText :false//‘Loading zoom’ 预加载时显示的文字
}
$(".jqzoom").jqzoom(option);
});
</script>

3.

<div>
<a href="img/200907301149531902[1].jpg" class="jqzoom" title="atitle">
<img src="img/200907301149531902_s[1].jpg" alt="" title="imgtitle" style="border: 1px solid #666;"/></a>
</div>

其中<a>中链接的是大图,<img>中链接的是小图

4.源码Demo下载