這篇文章主要介紹原生js實(shí)現(xiàn)放大鏡的示例分析,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
創(chuàng)新互聯(lián)是一家集網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè)、網(wǎng)站頁(yè)面設(shè)計(jì)、網(wǎng)站優(yōu)化SEO優(yōu)化為一體的專業(yè)網(wǎng)站制作公司,已為成都等多地近百家企業(yè)提供網(wǎng)站建設(shè)服務(wù)。追求良好的瀏覽體驗(yàn),以探求精品塑造與理念升華,設(shè)計(jì)最適合用戶的網(wǎng)站頁(yè)面。 合作只是第一步,服務(wù)才是根本,我們始終堅(jiān)持講誠(chéng)信,負(fù)責(zé)任的原則,為您進(jìn)行細(xì)心、貼心、認(rèn)真的服務(wù),與眾多客戶在蓬勃發(fā)展的市場(chǎng)環(huá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>
以上是“原生js實(shí)現(xiàn)放大鏡的示例分析”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)網(wǎng)站建設(shè)公司行業(yè)資訊頻道!
另外有需要云服務(wù)器可以了解下創(chuàng)新互聯(lián)建站muchs.cn,海內(nèi)外云服務(wù)器15元起步,三天無理由+7*72小時(shí)售后在線,公司持有idc許可證,提供“云服務(wù)器、裸金屬服務(wù)器、高防服務(wù)器、香港服務(wù)器、美國(guó)服務(wù)器、虛擬主機(jī)、免備案服務(wù)器”等云主機(jī)租用服務(wù)以及企業(yè)上云的綜合解決方案,具有“安全穩(wěn)定、簡(jiǎn)單易用、服務(wù)可用性高、性價(jià)比高”等特點(diǎn)與優(yōu)勢(shì),專為企業(yè)上云打造定制,能夠滿足用戶豐富、多元化的應(yīng)用場(chǎng)景需求。
網(wǎng)頁(yè)題目:原生js實(shí)現(xiàn)放大鏡的示例分析-創(chuàng)新互聯(lián)
文章出自:http://muchs.cn/article10/dpoido.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站設(shè)計(jì)、軟件開發(fā)、域名注冊(cè)、網(wǎng)站制作、定制網(wǎng)站、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容