开发技术学习

前几天在做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