原生js實(shí)現(xiàn)放大鏡
原理:左邊陰影在左邊圖片上從左到右移動(dòng)的時(shí)候,右邊大框也在右邊大圖片上從左到右移動(dòng)(盡管在視覺、原理和代碼上是相反的);所謂放大,其實(shí)就是一張?jiān)揪秃苄〉膱D對(duì)應(yīng)一張?jiān)揪秃艽蟮膱D。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> *{ margin:0; padding:0; } .small{ width: 400px; height: 400px; position: relative; background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center; border: 1px solid #ccc; } .small .inner{ width: 100px; height: 100px; background: yellow; opacity: 0.5; filter: alpha(opacity=50); position: absolute; left:0; top:0; display: none; } .big{ width: 400px; height: 400px; position: absolute; left:410px; top:0; overflow: hidden; border: 1px solid #ccc; display: none; } .big img{ width: 200%; height: 200%; position: absolute; left:0; top:0; } </style> </head> <body> <div id="small" class="small"> <div class="inner"></div> </div> <div id="big" class="big"> <img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/> </div> <script> var small=document.getElementById('small'); var inner=small.getElementsByTagName('div')[0]; var big=document.getElementById('big'); var img=big.getElementsByTagName('img')[0]; //當(dāng)鼠標(biāo)移入small的時(shí)候,inner和big顯示 small.onmouseover=function(){ big.style.display='block'; inner.style.display='block'; }; //當(dāng)鼠標(biāo)在small移動(dòng)的時(shí)候:1)鼠標(biāo)在inner的中間 2)inner跟隨鼠標(biāo)移動(dòng) small.onmousemove=function(e){ e=e||window.event; var left=e.clientX-this.offsetLeft-inner.offsetWidth/2; var top=e.clientY-this.offsetTop-inner.offsetHeight/2; if(left<=0){ left=0; }else if(left>=this.offsetWidth-inner.offsetWidth){ left=this.offsetWidth-inner.offsetWidth } if(top<=0){ top=0; }else if(top>=this.offsetHeight-inner.offsetHeight){ top=this.offsetHeight-inner.offsetHeight } inner.style.left= left+'px'; inner.style.top= top+'px'; //當(dāng)inner移動(dòng)的時(shí)候,大圖跟著一起移動(dòng),并且,大圖和inner移動(dòng)的方向相反; //或者理解為:左邊陰影在圖片上從左到右移動(dòng)的時(shí)候,右邊大框也在大圖片上從左到右移動(dòng)(盡管視覺上是相反的)。 img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px'; img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px'; }; //當(dāng)鼠標(biāo)移出的時(shí)候,inner和big隱藏; small.onmouseout=function(){ big.style.display='none'; inner.style.display='none'; } </script> </body> </html>
以上就是本文的全部?jī)?nèi)容,希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時(shí)也希望多多支持腳本之家!
相關(guān)文章
JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼
這篇文章主要介紹了JavaScript截取指定長(zhǎng)度字符串點(diǎn)擊可以展開全部代碼 的相關(guān)資料,需要的朋友可以參考下2015-12-12easyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例
下面小編就為大家?guī)硪黄猠asyui-edatagrid.js實(shí)現(xiàn)回車鍵結(jié)束編輯功能的實(shí)例。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼
這篇文章主要介紹了javascript+HTML5的canvas實(shí)現(xiàn)七夕情人節(jié)3D玫瑰花效果代碼,使用了html5的canvas技術(shù),可呈現(xiàn)出帶有3D效果的玫瑰花漸顯效果,非常逼真自然,需要的朋友可以參考下2015-08-08