JS圖片放大效果簡(jiǎn)單實(shí)現(xiàn)代碼
本文實(shí)例為大家分享了JS實(shí)現(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=""> <!-- 鼠標(biāo)選中框 --> <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é)點(diǎn) oShow.onmouseover=function() { oSpan.style.display='block'; oImg.parentNode.style.display='block'; }; oShow.onmouseout=function() { oSpan.style.display=''; oImg.parentNode.style.display=''; }; // 放大器移動(dòng) oShow.onmousemove=function(ev) { // 解決瀏覽器兼容問題 var oEvent=ev||event; // 獲得鼠標(biāo)的位置 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>
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- js實(shí)現(xiàn)圖片旋轉(zhuǎn) js滾動(dòng)鼠標(biāo)中間對(duì)圖片放大縮小
- js圖片放大鏡效果實(shí)現(xiàn)方法詳解
- angularjs點(diǎn)擊圖片放大實(shí)現(xiàn)上傳圖片預(yù)覽
- JS實(shí)現(xiàn)圖片放大縮小的方法
- js自制圖片放大鏡功能
- 利用javascript實(shí)現(xiàn)的三種圖片放大鏡效果實(shí)例(附源碼)
- 原生js實(shí)現(xiàn)圖片放大縮小計(jì)時(shí)器效果
- 原生javascript實(shí)現(xiàn)圖片放大鏡效果
- 原生js代碼實(shí)現(xiàn)圖片放大境效果
- js實(shí)現(xiàn)圖片放大展示效果
相關(guān)文章
javascript 獲取鼠標(biāo)的絕對(duì)位置 event
javascript 獲取鼠標(biāo)的絕對(duì)位置 event2009-06-06JavaScript判斷元素是否在可視區(qū)域的三種方法
這這篇文章給大家總結(jié)了JavaScript判斷元素是否在可視區(qū)域的三種方法,getBoundingClientRect,IntersectionObserver和offsetTop、scrollTop這三種方法,文中通過代碼示例給大家介紹的非常詳細(xì),需要的朋友可以參考下2023-12-12javascript event在FF和IE的兼容傳參心得(絕對(duì)好用)
event在IE和FF不兼,下面為大家分享的是javascript event在FF和IE的兼容傳參心得,需要的朋友可以參考下2014-07-07克隆javascript對(duì)象的三個(gè)方法小結(jié)
克隆javascript對(duì)象的三個(gè)方法整理,需要的朋友可以參考下。2011-01-01收藏Javascript中常用的55個(gè)經(jīng)典技巧
收藏Javascript中常用的55個(gè)經(jīng)典技巧...2007-08-08javascript上下方向鍵控制表格行選中并高亮顯示的方法
這篇文章主要介紹了javascript上下方向鍵控制表格行選中并高亮顯示的方法,涉及javascript針對(duì)鍵盤按鍵操作相應(yīng)的技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02