Javascript仿京東放大鏡的效果
更新時間:2017年03月01日 14:31:43 作者:632855323gjp
本文主要介紹了Javascript仿京東放大鏡效果的實例。具有很好的參考價值,下面跟著小編一起來看下吧
隨便找一個圖片吧。小伙伴們,想怎么玩就怎么玩(注意路徑),親自測試,絕對沒問題。
話不多說,請看代碼:
<html> <head> <meta charset="utf-8"> <style type="text/css"> body,div{margin: 0; padding: 0;} #zhuti{ margin:50px; position: relative; } #small{ width: 300px; height: 187px; border: 1px solid #000; } #big{ border: 1px solid #666; overflow: hidden; width: 300px; height: 187px; position: absolute; left: 310px; top: 0px; display: none; /*默認(rèn)隱藏*/ } #jingtou{ width: 50px; height: 50px; background: #666; opacity: 0.4; position: absolute; display: none; /*默認(rèn)隱藏*/ } #bigimg{ position: absolute; } </style> </head> <body> <div id="zhuti"> <div id="small"> <div id="jingtou"></div> <img src="img/ktm_small.jpg"> </div> <div id="big"> <img src="img/ktm_big.jpg" id="bigimg"> </div> </div> <script type="text/JavaScript"> //封裝一個函數(shù)(id形式參數(shù)) function $(id) { return document.getElementById(id); } var small =$('small'); var big =$('big'); var jingtou =$('jingtou'); var zhuti =$('zhuti'); var bigimg =$('bigimg'); //監(jiān)視鼠標(biāo)(鏡頭) small.onmouseover = function(){ big.style.display='block'; jingtou.style.display='block'; } small.onmouseout = function(){ big.style.display='none'; jingtou.style.display='none'; } //擋鼠板移動的時候 small.onmousemove = function(event){ //獲得當(dāng)前坐標(biāo) //減去鏡頭寬度的一半 var left = event.clientX - zhuti.offsetLeft -jingtou.offsetWidth/2; var top = event.clientY -zhuti.offsetTop - jingtou.offsetHeight/2; //進行判斷語句(固定0的位置) //向左走 if(left<=0){ left =0; } //向上走 if(top<=0){ top =0; } //向右走 if(left >= small.offsetWidth-jingtou.offsetWidth){ left = small.offsetWidth-jingtou.offsetWidth; } //向下走 if(top >= small.offsetHeight-jingtou.offsetHeight){ top = small.offsetHeight-jingtou.offsetHeight; } //小圖的比例 var smallX = left / (small.offsetWidth - jingtou.offsetWidth); //var smallX = left / (small.offsetWidth - jingtou.offsetWidth); var smallY = top / (small.offsetHeight - jingtou.offsetHeight); //var smallY = top / (small.offsetHeight - jingtou.offsetHeight); var bigX = -smallX * (bigimg.offsetWidth - big.offsetWidth); var bigY = -smallY * (bigimg.offsetHeight - big.offsetHeight); //求a和b的值 bigimg.style.left = bigX + 'px'; bigimg.style.top = bigY + 'px'; //鏡頭距離左邊的位置==鼠標(biāo)距離左邊的位置 jingtou.style.left = left +'px'; jingtou.style.top = top +'px'; } </script> </body> </html>
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
相關(guān)文章
javascript 小數(shù)取整簡單實現(xiàn)方式
這篇文章主要介紹了javascript 小數(shù)取整d的簡單實現(xiàn)方式,需要的朋友可以參考下2014-05-05JS中call(),apply(),bind()函數(shù)的區(qū)別與用法詳解
這篇文章主要介紹了JS中call(),apply(),bind()函數(shù)的高級用法詳解,需要的朋友可以參考下2022-12-12結(jié)合ES6?編寫?JavaScript?設(shè)計模式中的結(jié)構(gòu)型模式
這篇文章主要介紹了結(jié)合ES6編寫JavaScript?設(shè)計模式中的結(jié)構(gòu)型模式,設(shè)計模式是軟件設(shè)計中常見問題的解決方案,這些模式很容易重復(fù)使用并且富有表現(xiàn)力2022-07-07