<!doctype html><html><head><meta charset="utf-8"><title>無(wú)標(biāo)題文檔</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';//計(jì)算比率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>現(xiàn)在圖片的放大區(qū)域是在外面的,如果想讓圖片的放大區(qū)域在圖片內(nèi)部,鼠標(biāo)移到哪里放大區(qū)域就跟到哪里該怎么改這段代碼
求指教,關(guān)于js放大鏡的小問(wèn)題
朦朧月
2016-12-10 12:42:07