求指教，关于js放大镜的小问题
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
*{margin:0;padding:0;}
#box1{width:400px; height:252px; position:relative; margin:100px auto;}
#box1 img{width:100%;}
#box1 span{position:absolute; top:0; left:0; background:#DF4B4B; opacity:.5; width:100px; height:100px; cursor:move; display:none;}
#box2{width:200px; height:200px; position:absolute; top:102px; left:500px; overflow:hidden; display:none}
#box2 img{position:absolute;}
</style>
</head>
<body>
<div id="box1">
<img src="image/pic.jpg">
<span></span>
</div>
<div id="box2">
<img src="image/pic.jpg">
</div>
</body>
</html>
<script>
var oBox1=document.getElementById('box1');
var oSpan=oBox1.getElementsByTagName('span')[0];
var oImg=document.getElementsByTagName('img')[1];
var oBox2=document.getElementById('box2');
oBox1.onmousemove=function(ev){
ev=ev||window.event;
//显示
oBox2.style.display='block';
oSpan.style.display='block';
var l=ev.clientX-oBox1.offsetLeft-oSpan.offsetWidth/2;
var t=ev.clientY-oBox1.offsetTop-oSpan.offsetHeight/2;
if(l<0){
l=0;
};
if(t<0){
t=0;
};
if(l>oBox1.offsetWidth-oSpan.offsetWidth){
l=oBox1.offsetWidth-oSpan.offsetWidth
};
if(t>oBox1.offsetHeight-oSpan.offsetHeight){
t=oBox1.offsetHeight-oSpan.offsetHeight
};
oSpan.style.left=l+'px';
oSpan.style.top=t+'px';
//计算比率
var rateY=t/-(oBox1.offsetHeight-oSpan.offsetHeight);
var rateX=l/-(oBox1.offsetWidth-oSpan.offsetWidth);
oImg.style.top=(oImg.offsetHeight-oBox2.offsetHeight)*rateY+'px';
oImg.style.left=(oImg.offsetWidth-oBox2.offsetWidth)*rateX+'px';
//隐藏
oBox1.onmouseout=function(){
oBox2.style.display='none';
oSpan.style.display='none';
};
};
</script>
现在图片的放大区域是在外面的，如果想让图片的放大区域在图片内部，鼠标移到哪里放大区域就跟到哪里该怎么改这段代码
朦胧月0回答
随时随地看视频慕课网APP
相关分类
Java
JavaScript