网页中商品图片的局部放大效果

需求背景：购物网站中的商品局部放大：



代码：

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 class='jqZoomPup' style='height:166.32px;width: 214.240837696335px;border-width: 1px;visibility: hidden;position: absolute;'>

</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');

});