JS圖片放大效果簡單實現(xiàn)代碼
更新時間:2016年09月08日 16:08:04 作者:劍出?;?
這篇文章主要為大家詳細介紹了JS實現(xiàn)圖片放大效果,具有一定的參考價值,感興趣的小伙伴們可以參考一下
本文實例為大家分享了JS實現(xiàn)圖片放大效果 ,供大家參考,具體內(nèi)容如下
<!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" alt=""> <!-- 鼠標選中框 --> <span></span> <!-- 背景 --> <div class="show"></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獲得父節(jié)點 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>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
JavaScript判斷元素是否在可視區(qū)域的三種方法
這這篇文章給大家總結(jié)了JavaScript判斷元素是否在可視區(qū)域的三種方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop這三種方法,文中通過代碼示例給大家介紹的非常詳細,需要的朋友可以參考下2023-12-12javascript event在FF和IE的兼容傳參心得(絕對好用)
event在IE和FF不兼,下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07javascript上下方向鍵控制表格行選中并高亮顯示的方法
這篇文章主要介紹了javascript上下方向鍵控制表格行選中并高亮顯示的方法,涉及javascript針對鍵盤按鍵操作相應(yīng)的技巧,具有一定參考借鑒價值,需要的朋友可以參考下2015-02-02