Javascript仿京东放大镜的效果
随便找一个图片吧。小伙伴们，想怎么玩就怎么玩（注意路径），亲自测试，绝对没问题。
话不多说，请看代码：
<html>
<head>
<metacharset="utf-8">
<styletype="text/css">
body,div{margin:0;padding:0;}
#zhuti{
margin:50px;
position:relative;
}
#small{
width:300px;
height:187px;
border:1pxsolid#000;
}
#big{
border:1pxsolid#666;
overflow:hidden;
width:300px;
height:187px;
position:absolute;
left:310px;
top:0px;
display:none;/*默认隐藏*/
}
#jingtou{
width:50px;
height:50px;
background:#666;
opacity:0.4;
position:absolute;
display:none;/*默认隐藏*/
}
#bigimg{
position:absolute;
}
</style>
</head>
<body>
<divid="zhuti">
<divid="small">
<divid="jingtou"></div>
<imgsrc="img/ktm_small.jpg">
</div>
<divid="big">
<imgsrc="img/ktm_big.jpg"id="bigimg">
</div>
</div>
<scripttype="text/JavaScript">
//封装一个函数(id形式参数)
function$(id){
returndocument.getElementById(id);
}
varsmall=$('small');
varbig=$('big');
varjingtou=$('jingtou');
varzhuti=$('zhuti');
varbigimg=$('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){
//获得当前坐标//减去镜头宽度的一半
varleft=event.clientX-zhuti.offsetLeft-jingtou.offsetWidth/2;
vartop=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;
}
//小图的比例
varsmallX=left/(small.offsetWidth-jingtou.offsetWidth);
//varsmallX=left/(small.offsetWidth-jingtou.offsetWidth);
varsmallY=top/(small.offsetHeight-jingtou.offsetHeight);
//varsmallY=top/(small.offsetHeight-jingtou.offsetHeight);
varbigX=-smallX*(bigimg.offsetWidth-big.offsetWidth);
varbigY=-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';
}
</script>
</body>
</html>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持毛票票！