簡單實(shí)現(xiàn)js放大鏡效果
更新時(shí)間:2017年07月24日 14:41:08 作者:diasa
這篇文章主要教大家如何簡單實(shí)現(xiàn)js放大鏡效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了js放大鏡效果展示的具體代碼,供大家參考,具體內(nèi)容如下
具體代碼如下:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> body,div,img{ margin:0; padding:0; } img{ display:block; border:none; } #box{ position:absolute; top:20px; left:20px; width:350px; height:350px; box-shadow:3px 3px 10px 0 #111111; } #box img{ width:100%; height:100%; } #mark{ display:none; position:absolute; top:0; left:0; width:175px; height:175px; background:#000; opacity: 0.5; filter:alpha(opacity=50); cursor:move; } #boxRight{ display:none; position:absolute; top:20px; left:380px; width:350px; height:350px; overflow:hidden; } /*我們右側(cè)的圖片的大小是需要嚴(yán)格計(jì)算的: mark的width是box的width的一半,那么我們的大圖寬度也應(yīng)該是小圖的二倍 */ #boxRight img{ position:absolute; top:0; left:0; width:200%; height:200%; } </style> </head> <body> <div id='box'> <img src="img/iphone.jpg" alt=""> <div id='mark'></div> </div> <div id='boxRight'> <img src="img/iphone_big.jpg" alt=""> </div> <script> //放大鏡的原理: 我們的mark橫向是box的一半,縱向也是box的一半,那么右側(cè)的大圖橫向(縱向)應(yīng)該是左側(cè)小圖的2倍 var box = document.getElementById('box'); var mark = document.getElementById('mark'); var boxRight = document.getElementById('boxRight'); //設(shè)置mark這個(gè)盒子 function setPosition(e){ var top = e.clientY - box.offsetTop - (mark.offsetHeight/2); var left = e.clientX - box.offsetLeft - (mark.offsetWidth/2); //邊界判斷 var tempL = 0,tempT = 0; var minL = 0,minT = 0,maxL = box.offsetWidth - mark.offsetWidth,maxT = box.offsetHeight - mark.offsetHeight ; if(left<minL){ mark.style.left = minL + "px"; tempL = minL; }else if(left>maxL){ mark.style.left = maxL + "px"; tempL = maxL; }else{ mark.style.left = left + "px"; tempL = left; } if(top<minT){ mark.style.top = minT + "px"; tempT = minT; }else if(top>maxT){ mark.style.top = maxT + "px"; tempT = maxT; }else{ mark.style.top = top + "px"; tempT = top; } //右側(cè)圖片跟著運(yùn)動(dòng):左側(cè)移動(dòng)多少,右側(cè)跟著移動(dòng)他的2倍即可 var oImg = boxRight.getElementsByTagName("img")[0]; oImg.style.left = -tempL*2 + "px"; oImg.style.top = -tempT*2 + "px"; } box.onmouseenter = function(e){ e = e || window.event; mark.style.display = "block"; setPosition(e); boxRight.style.display = "block"; } box.onmousemove = function(e){ e = e || window.event; setPosition(e); } box.onmouseleave = function(e){ e = e || window.event; mark.style.display = "none"; boxRight.style.display = "none"; } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
一個(gè)簡單但常用的javascript表格樣式_鼠標(biāo)劃過行變色 簡潔實(shí)現(xiàn)
經(jīng)常性的會(huì)需要使用表格顯示一些東西,當(dāng)表格比較大的時(shí)候一眼望去腦袋可能會(huì)有些暈,經(jīng)常性的因?yàn)闆]看準(zhǔn)行而出現(xiàn)誤操作,一般解決辦法是交替行變行或者鼠標(biāo)劃過行變色2008-09-09在element-ui的el-tree組件中用render函數(shù)生成el-button的實(shí)例代碼
這篇文章主要介紹了在element-ui的el-tree組件中用render函數(shù)生成el-button 的方法,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11JavaScript?對象新增方法defineProperty與keys的使用說明
這篇文章主要介紹了JavaScript對象新增方法defineProperty與keys的使用說明,文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的朋友可以參考一下2022-09-09setTimeout與setInterval的區(qū)別淺析
這篇文章主要給大家介紹了關(guān)于setTimeout與setInterval區(qū)別的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛
這篇文章主要介紹了JavaScript實(shí)現(xiàn)一個(gè)電子小蜘蛛,具體的樣子就是讓它會(huì)跟隨著我們的鼠標(biāo)進(jìn)行移動(dòng),那么我們?nèi)绾螌?shí)現(xiàn)這樣的效果呢,下面來詳細(xì)講解實(shí)現(xiàn)方法,需要的朋友可以參考下2024-10-10