需求背景：购物网站中的商品局部放大：
代码：
html:
<div class="Pro_Detleft"> <div class="detail-itemsummary-imageviewer"> <div id="middlePicRemark" class="middlePicRemark"> <img id="imgGoodsPic" alt="" src="images/20141009154623153.jpg" style="width:950px; height:950px; display:block;position: relative"></div> <div id="middlePicBox" class="middlePicBox"> <span id="BigViewImage" class="jqzoom" style="outline-style: none; cursor: crosshair; display: block; position: relative; height: 396px; width: 396px;"><img id="" style="width: 396px; height: 396px; position: absolute; top: 0px; left: 0px;" src="images/20141009154623153.jpg"> <div> </div></span> </div>
css:
.middlePicRemark {position: absolute;top: 0;left: 0;width: 244px;z-index: 1;line-height: 18px;text-align: center;padding: 3px;background-color: #f3f3f3;border: 1px #999 solid;display: none;}.middlePicBox {clear: both;PADDING-BOTTOM: 0;HEIGHT: 396px;TEXT-ALIGN: center;border: 1px solid #E3E3E3;position: relative;}.middlePicBox i.F_goods_xg {display: block;width: 77px;height: 77px;position: absolute;top: 28px;left: 28px;z-index: 5;}.middlePicBox {clear: both;PADDING-BOTTOM: 0;HEIGHT: 396px;TEXT-ALIGN: center;border: 1px solid #E3E3E3;position: relative;}.jqZoomPup {overflow: hidden;background-color: #FFF;-moz-opacity: 0.6;opacity: 0.6;filter: alpha(opacity = 60);z-index: 10;border-color: #e3e3e3;border-style: solid;cursor: crosshair;}
js:
//鼠标在大图上移动时局部放大 /* * 算法思路是用两个图片，，一个为鼠标在其上移动的小图，另一个为大图，动态获取鼠标的位置，在小图上的偏移量成比例的移动大图，使其部分显示在div中达到放大效果 * * */ $("#BigViewImage").mousemove(function(e){ var divObj=document.getElementById("middlePicBox");//获取外层span在整个页面的偏移量 var curX= e.pageX-GetObjPos(divObj)[‘x’]; //获取鼠标相对于大图片左上角的偏移量 var curY= e.pageY-GetObjPos(divObj)[‘y’]; if(curX<107.12)curX=107.12; //如果小图片左上角到达大图片左上角，则停止移动 if(curX>288.88)curX=288.88; if(curY<83.16)curY=83.16; if(curY>312.84)curY=312.84; var percentX=(curX-107.12)/396; var percentY=(curY-83.16)/396; //当前小矩形框的左上角偏移量相对于图片的横向比例 var BigViewOffsetX=percentX*950; //计算出右边放大图应该放大的偏移量 var BigViewOffsetY=percentY*950; $("#middlePicRemark").css(‘display’,’block’); $(‘.jqZoomPup’).css(‘left’,curX-107.12+’px’); $(‘.jqZoomPup’).css(‘top’,curY-83.16+’px’); $(".jqZoomPup").css(‘visibility’,’visible’); $("#imgGoodsPic").css(‘left’,0-BigViewOffsetX+’px’); $("#imgGoodsPic").css(‘top’,0-BigViewOffsetY+’px’); }).mouseout(function(){ $(".jqZoomPup").css(‘visibility’,’hidden’); $("#middlePicRemark").css(‘display’,’none’); });
也就越容易失败，还不如怀揣一颗平常心，“但行好事，莫问前程”，往往成功的几率反而更大些
