<!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/150
提交
取消