<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>产品图片放大镜效果</title>
<script src="../jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="jquery.jqzoom.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$(".jqzoom").jqzoom({
zoomType:"standard",
lens:true,
preloadImages:false,
alwaysOn:false,
zoomWidth:340,
zoomHeight:340,
xOffset:10,
yOffset:0,
position:"right",
});
})
</script>
<style type="text/css">
.zoomPad{
width:340px;
height:340px;
position:relative;
z-index:90;
float:left;
}
.zoomPup{
z-index:99;
background:#fff;
opacity:0.6;
filter:alpha(opacity=60);
cursor:crosshair;
}
.zoomWrapper{
width:340px;
height"340px;
overflow:hidden;
position:relative;
border:1px solid #999;
}
.zoomWrapperTitle{
height:18px;
width:100%;
background:#999;
text-align:center;
line-height:18px;
position:absolute;
left:0;
top:0;
z-index:100;
}
</style>
</head>
<body>
<div class="jqzoomWrap">
<a href="blue_one_big.jpg" class="jqzoom" rel="gall" title>
<img src="blue_one_small.jpg" id="bigImg" title="免烫纯棉条纹衬衫" alt="免烫纯棉条纹衬衫" />
</a>
</div>
<div >
<h3>jqzoom.js插件的各项参数说明</h3>
zoomType ：'standard'，'reverse' 默认'standard','reverse' 的时候开启透明;<br />
p_w_picpathOpacity ：默认0.2 透明度 开启'reverse' 的时候可用;<br />
zoomWidth： 宽度 zoomHeight 高度 默认都是200;<br />
xOffset ：默认10 x方向放大效果div的偏移<br />
yOffset ：默认0 y方向放大效果div的偏移<br />
position： 默认'right' 可选 :'right' ,'left' ,'top' ,'bottom' 放大效果的位置<br />
lens ：默认true 被放大区域是否突出<br />
title ：默认true 标题<br />
showEffect： 默认 'show' 可选'show' ,'fadein' 开启渐入效果<br />
hideEffect： 默认'hide' 可选 'hide' ,'fadeout' 开启渐处效果<br />
fadeinSpeed fadeoutSpeed ：可选 'fast','slow','medium' 默认 'slow' 出 入的速度<br />
showPreload true/false：是否显示加载<br />
preloadText： 默认 'Loading zoom' 加载是的标题<br />
preloadPosition： 默认 'center' 加载区位置（可自行更改css）
</div>
</body>
</html>有了这个插件，电商网站上产品放大镜的效果变得很简单了。
附件中有实例提供。
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
