原生js簡單實(shí)現(xiàn)放大鏡特效
本文實(shí)例為大家分享了js實(shí)現(xiàn)放大鏡特效展示的具體代碼,供大家參考,具體內(nèi)容如下
普及知識(shí):放大鏡特效涉及到的幾個(gè)值
offsetWidth 獲取元素的寬度
offsetHeight 獲取元素的高度
offsetLeft父元素沒有定位時(shí),獲取元素距離頁面的左邊距,父元素有定位時(shí),獲取元素距離父元素的左邊距
offsetTop父元素沒有定位時(shí),獲取元素距離頁面的上邊距,父元素有定位時(shí),獲取元素距離父元素的上邊距
scrollTop 內(nèi)容滾動(dòng)的上邊距
scrollLeft 內(nèi)容滾動(dòng)的左邊距
onmousemove 鼠標(biāo)移動(dòng)事件
onmouseover 鼠標(biāo)劃過事件
主要思路:
1.鼠標(biāo)移動(dòng),陰影區(qū)跟著移動(dòng)
2.鼠標(biāo)移動(dòng),大圖也跟著移動(dòng)
3.陰影區(qū)域與小圖的比例 以及 大圖顯示區(qū)域與大圖的比例 是一樣的
4.保證陰影區(qū)域以及大div.big在鼠標(biāo)移動(dòng)到div.small時(shí)顯示
html實(shí)現(xiàn)
<div id="fangdajing"> <div class="small"> <img src="small.jpg" alt=""> <div class="shadow"></div> </div> <div class="big"> <img src="big.jpg" alt=""> </div> </div>
css樣式
//定位,大圖顯示區(qū)域和陰影區(qū)域最開始不顯示 #fangdajing{ width:450px; height:450px; position:relative; } .small{ width:450px; height:450px; position:absolute; left:0px; top:0px; } .shadow{ width:200px; height:200px; background:yellow; opacity:0.3; position:absolute; top:0; left:0; display:none; } .big{ position:absolute; left:450px; width:356px; height:356px; overflow:hidden; display:none; }
js實(shí)現(xiàn)
1.獲取對(duì)象
var fdj = document.getElementById('fangdajing'); var big = document.getElementsByClassName('big')[0]; var small = document.getElementsByClassName('small')[0]; var shadow = document.getElementsByClassName('shadow')[0];
2.鼠標(biāo)的移入移出事件,當(dāng)鼠標(biāo)移入的時(shí)候,顯示大圖顯示區(qū)以及陰影區(qū)域
small.onmouseover = function(){ big.style.display = 'block'; shadow.style.display = 'block'; }
3.
(1)鼠標(biāo)移動(dòng),div.shadow跟著移動(dòng),先獲取到shadow在small內(nèi)的相對(duì)位置,已知鼠標(biāo)點(diǎn)擊位置距離頁面的邊距,fdj距離頁面的邊距,fdj以及shadow的寬高,讓鼠標(biāo)劃過的位置一直位于shadow區(qū)域的中心點(diǎn),所以可得shadow在small內(nèi)的相對(duì)位置,之后進(jìn)行判斷,讓shadow不能出邊界,最后進(jìn)行賦值操作
(2)shadow區(qū)域移動(dòng),大圖顯示相應(yīng)的位置,即大圖滾動(dòng)相應(yīng)的距離,大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth,以shadow的左上角為準(zhǔn),大圖的滾動(dòng)距離為left*相應(yīng)比例
small.onmousemove = function(ent){ var e = ent || event; //獲取鼠標(biāo)事件對(duì)象 var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //獲取shadow在small內(nèi)的相對(duì)位置 var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2; var tw = fdj.offsetWidth - shadow.offsetWidth; //獲取shadow最大可移動(dòng)距離 var th = fdj.offsetHeight - shadow.offsetHeight; //對(duì)shadow進(jìn)行限制 if(left < 0){ left = 0; }else if(left > tw){ left = tw; } if(top < 0){ top = 0; }else if(top > th){ top = th; } //賦值 small.style.left = left + 'px'; small.style.top = top + 'px'; //大圖跟著移動(dòng) var sl = left * big.offsetWidth / shadow.offsetWidth; var st = top * big.offsetHeight / shadow.offsetHeight; big.scrollTop = st; big.scrollLeft = sl; }
4.鼠標(biāo)移出,大圖以及shadow隱藏
small.onmouserout = function(){ big.style.display = 'none'; shadow.style.display = 'none'; }
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js快速與任意QQ號(hào)碼建立臨時(shí)對(duì)話
那時(shí)候在群里討論的,吸納很多人的方法與意見,修改而成的2008-10-10發(fā)一個(gè)數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去
發(fā)一個(gè)數(shù)據(jù)過濾的代碼,很簡單,有用的著的拿去...2007-02-02JavaScript 中Date對(duì)象的格式化代碼方法匯總
JavaScript默認(rèn)的時(shí)間格式我們一般情況下不會(huì)用,所以需要進(jìn)行格式化,下面小編給大家?guī)砹巳Njs date對(duì)象格式化實(shí)例代碼,需要的朋友參考下吧2017-09-09學(xué)習(xí)使用bootstrap的modal和carousel
這篇文章主要教大家學(xué)會(huì)用bootstrap的modal和carousel,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12javascript 拖放效果實(shí)現(xiàn)代碼
JavaScript擅長于修改頁面中的DOM元素,但是我們使用JavaScript通常只是實(shí)現(xiàn)一些簡單功能,例如實(shí)現(xiàn)圖片的翻轉(zhuǎn),網(wǎng)頁中的標(biāo)簽頁,等等。這篇文章將向你展示如何在頁面中,對(duì)創(chuàng)建的元素實(shí)現(xiàn)拖放。2010-01-01