普及知識：放大鏡特效涉及到的幾個(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=http://www.3lian.com/edu/2017/05-16/"small.jpg" alt=""> <div class="shadow"></div> </div> <div class="big"> <img src=http://www.3lian.com/edu/2017/05-16/"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.獲取對象
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)的相對位置，已知鼠標(biāo)點(diǎn)擊位置距離頁面的邊距，fdj距離頁面的邊距，fdj以及shadow的寬高，讓鼠標(biāo)劃過的位置一直位于shadow區(qū)域的中心點(diǎn)，所以可得shadow在small內(nèi)的相對位置，之后進(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)事件對象 var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //獲取shadow在small內(nèi)的相對位置 var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2; var tw = fdj.offsetWidth - shadow.offsetWidth; //獲取shadow最大可移動(dòng)距離 var th = fdj.offsetHeight - shadow.offsetHeight; //對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'; }