Javascript仿京东放大镜的效果

随便找一个图片吧。小伙伴们，想怎么玩就怎么玩（注意路径），亲自测试，绝对没问题。

话不多说，请看代码：

随便找一个图片吧。小伙伴们，想怎么玩就怎么玩（注意路径），亲自测试，绝对没问题。 话不多说，请看代码：

d) {

return document.getElementById(id);

}

var small =$('small');

var big =$('big');

var jingtou =$('jingtou');

var zhuti =$('zhuti');

var bigimg =$('bigimg');

//监视鼠标(镜头)

small.onmouseover = function(){

big.style.display='block'

jingtou.style.display='block'

}

small.onmouseout = function(){

big.style.display='none'

jingtou.style.display='none'

}

//挡鼠板移动的时候

small.onmousemove = function(event){

//获得当前坐标 //减去镜头宽度的一半

var left = event.clientX - zhuti.offsetLeft -jingtou.offsetWidth/2;

var top = event.clientY -zhuti.offsetTop - jingtou.offsetHeight/2;

//进行判断语句（固定0的位置）

//向左走

if(left<=0){

left =0;

}

//向上走

if(top<=0){

top =0;

}

//向右走

if(left >= small.offsetWidth-jingtou.offsetWidth){

left = small.offsetWidth-jingtou.offsetWidth;

}

//向下走

if(top >= small.offsetHeight-jingtou.offsetHeight){

top = small.offsetHeight-jingtou.offsetHeight;

}

//小图的比例

var smallX = left / (small.offsetWidth - jingtou.offsetWidth);

//var smallX = left / (small.offsetWidth - jingtou.offsetWidth);

var smallY = top / (small.offsetHeight - jingtou.offsetHeight);

//var smallY = top / (small.offsetHeight - jingtou.offsetHeight);

var bigX = -smallX * (bigimg.offsetWidth - big.offsetWidth);

var bigY = -smallY * (bigimg.offsetHeight - big.offsetHeight);

//求a和b的值

bigimg.style.left = bigX + 'px'

bigimg.style.top = bigY + 'px'

//镜头距离左边的位置==鼠标距离左边的位置

jingtou.style.left = left +'px'

jingtou.style.top = top +'px'

}