本文實例為大家分享了JS實現圖片放大效果，供大家參考，具體內容如下
<!DOCTYPE html><html><head> <meta charset="utf-8"/> <title></title> <style type="text/css"> #div1 { width:300px; height:300px; position:relative; margin:30px auto 0px; } #div1 img{ width: 300px; } #div1 span { width:150px; height:150px; background:red; position:absolute; left:0px; top:0px; display:none; opacity:0.2; } .show { width:100%; height:100%; background:red; position:absolute; left:0px; top:0px; z-index:10px; opacity:0.1; } #div2 { width:300px; height:300px; position:relative; top: -300px; left: 300px; display:none; overflow:hidden; margin:0px auto 0px; } #img1 { position:absolute; } </style> </head> <body> <div id="div1"> <!-- 圖片--> <img src="images/xiangqing.png"> <!-- 鼠標選中框--> <span></span> <!-- 背景--> <div></div> </div> <div id="div2"> <!-- 放大後的圖片--> <img id="img1" src="images/xiangqingda.png" /> </div> </body> <script> // 加載完成後顯示window.onload=function () { var oDiv=document.getElementById('div1'); var oShow=document.getElementsByClassName('show')[0]; var oSpan=document.getElementsByTagName('span')[0]; var oImg=document.getElementById('img1'); // parentNode獲得父節點oShow.onmouseover=function() { oSpan.style.display='block'; oImg.parentNode.style.display='block'; }; oShow.onmouseout=function() { oSpan.style.display=''; oImg.parentNode.style.display=''; }; // 放大器移動oShow.onmousemove=function(ev) { // 解決瀏覽器兼容問題var oEvent=ev||event; // 獲得鼠標的位置var x=oEvent.offsetX-oSpan.offsetWidth/2; var y=oEvent.offsetY-oSpan.offsetHeight/2; // console.log(oEvent.clientY); // console.log(oDiv.offsetTop); // console.log(oSpan.offsetHeight/2); // console.log(oEvent.clientY); if(x<0) { x=0; } else if(x>oShow.offsetWidth-oSpan.offsetWidth) { x=oShow.offsetWidth-oSpan.offsetWidth; } if(y<0) { y=0; } else if(y>oShow.offsetHeight-oSpan.offsetHeight) { y=oShow.offsetHeight-oSpan.offsetHeight; } // 給選中框定位oSpan.style.left=x+'px'; oSpan.style.top=y+'px'; // 給放大器定位var percentX=x/(oShow.offsetWidth-oSpan.offsetWidth); var percentY=y/(oShow.offsetHeight-oSpan.offsetHeight); var oImgparent=oImg.parentNode; oImg.style.left=-percentX*(oImg.offsetWidth-oImgparent.offsetWidth)+'px'; oImg.style.top=-percentY*(oImg.offsetHeight-oImgparent.offsetHeight)+'px'; }; };</script></html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。