前几天在做thinkphp一个积分商城的时候要用到产品图片放大的效果,
于是毫不犹豫使用了jquery插件jquery_zoom.js
效果图：
贴上代码：
<div class="bigImgArea"><!--bigImgArea begin-->
<div class="mainShow">
<a id="bigImg" href="{$data['imgUrl'][0]}" class="jqzoom" title="{$data.name}" style="cursor: crosshair; display: block; position: relative;">
<img id="midImg" src="{$data['imgUrl'][0]}" alt="{$data.name}" src340="{$data['imgUrl'][0]}" >
</a>
</div>
<div class="thumbnails" id="thumbnails1">
<a href="javascript: void(0);" class="pre preDisable"></a>
<div class="noExtra">
<ul class="moveable">
{foreach from=$data['imgUrl'] item=img}
<li><a href="javascript:void(0);" class="currImg" ref3=""><img src="{$img}" ref2="{$img}" ref340="{$img}" alt=""/></a></li>
{/foreach}
</ul>
</div>
<a href="javascript: void(0);" class="next"></a>
</div>
<script>
if(typeof(resolution) == "undefined"){
resolution = 0;
}
var bigImage = document.getElementById("bigImg");
var midImage = document.getElementById("midImg");
midImage.src = midImage.getAttribute("src340");
</script>
<script type="text/javascript" src="jqzoom.js"></script>
<script type="text/javascript" src="chgPic.js"></script>
<script type="text/javascript" language="jscript">
if(typeof(resolution) == "undefined"){
resolution = 0;
}
<!--
chgPic();
/*打开jqzoom放大产品图片功能*/
var options = {
zoomWidth: 450,
zoomHeight: 350,
xOffset: 20,
yOffset: -10,
title : false,
showEffect:"fadein",
hideEffect:"fadeout",
position: "right"
}
$(".jqzoom").jqzoom(options);
//-->
</script>
</div><!--bigImgArea end-->
以下是css:
/**产品放大**/
.bigImgArea{ display:inline;float:left;margin-left:15px;width:284px;padding:1px;border:1px solid #dedede;overflow:hidden;}
.bigImgArea .mainShow{width:280px;overflow:hidden;height:280px;line-height:280px;text-align:center;}
#midImg{width:280px;height:280px;vertical-align:middle;}
.thumbnails{padding:5px 0 0 15px;height:39px;background:#eee;border-top:1px solid #dedede;}
.thumbnails .noExtra{position:relative;float:left;width:218px;height:34px;overflow:hidden;}
.thumbnails .moveable{position:absolute;height:32px;left:0;top:0;overflow:hidden;}
.thumbnails li{float:left;margin-right:6px;border:0;}
.thumbnails li img{width:40px;height:30px;overflow:hidden;}
.thumbnails li a{display:block;width:40px;height:30px;overflow:hidden;border:1px #CCC solid;}
.thumbnails li a:hover, .thumbnails li a.currImg, .thumbnails li a.currImg:hover{border:1px #F60 solid;}
.thumbnails a.pre, .thumbnails a.pre:hover, .thumbnails a.next, .thumbnails a.next:hover{width:16px;height:30px;overflow:hidden;margin:2px 6px 0 0;background:url(../Images/arrow.gif) no-repeat 0 -58px;float:left;}
.thumbnails a.pre:hover{background-position:-38px -58px;}
.thumbnails a.next{background-position:-19px -58px;}
.thumbnails a.next:hover{background-position:-57px -58px;}
.thumbnails a.preDisable:hover{background-position:-38px -58px;cursor:default;}
.thumbnails a.nextDisable:hover{background-position:-19px -58px;cursor:default;}
div.jqZoomTitle{z-index:5000;text-align:center;font-size:11px;font-family:Tahoma;height:16px;padding-top:2px;position:absolute;top:0;left:0;width:100%;color:#FFF;background:#999;}
.jqZoomPup{overflow:hidden;background-color:#FFF;-moz-opacity:.6;opacity:.6;filter:alpha(opacity = 60);z-index:10;border-color:#c4c4c4;border-style:solid;cursor:crosshair;}
.jqZoomPup img{border:0;}
.preload{-moz-opacity:.8;opacity:.8;filter:alpha(opacity = 80);color:#333;font-size:12px;font-family:Tahoma;text-decoration:none;border:1px solid #CCC;background-color:white;padding:8px;text-align:center;background-image:url(../Images/zoomloader.gif);background-repeat:no-repeat;background-position:43px 30px;width:90px;* width:100px;height:43px;*height:55px;z-index:10;position:absolute;top:3px;left:3px;}
.jqZoomWindow{border:1px solid #dedede;background-color:#FFF}
打包下载：
bigZoom.rar