本文實例為大家分享了js實現放大鏡特效展示的具體代碼，供大家參考，具體內容如下
普及知識：放大鏡特效涉及到的幾個值
offsetWidth 獲取元素的寬度
offsetHeight 獲取元素的高度
offsetLeft父元素沒有定位時，獲取元素距離頁面的左邊距，父元素有定位時，獲取元素距離父元素的左邊距
offsetTop父元素沒有定位時，獲取元素距離頁面的上邊距，父元素有定位時，獲取元素距離父元素的上邊距
scrollTop 內容滾動的上邊距
scrollLeft 內容滾動的左邊距
onmousemove 鼠標移動事件
onmouseover 鼠標劃過事件
主要思路：
1.鼠標移動，陰影區跟著移動
2.鼠標移動，大圖也跟著移動
3.陰影區域與小圖的比例 以及 大圖顯示區域與大圖的比例 是一樣的
4.保證陰影區域以及大div.big在鼠標移動到div.small時顯示
html實現
<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樣式
//定位，大圖顯示區域和陰影區域最開始不顯示#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實現
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.鼠標的移入移出事件，當鼠標移入的時候，顯示大圖顯示區以及陰影區域
small.onmouseover = function(){ big.style.display = 'block'; shadow.style.display = 'block'; }3.
（1）鼠標移動，div.shadow跟著移動，先獲取到shadow在small內的相對位置，已知鼠標點擊位置距離頁面的邊距，fdj距離頁面的邊距，fdj以及shadow的寬高，讓鼠標劃過的位置一直位于shadow區域的中心點，所以可得shadow在small內的相對位置，之后進行判斷，讓shadow不能出邊界，最后進行賦值操作
（2）shadow區域移動，大圖顯示相應的位置，即大圖滾動相應的距離，大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth，以shadow的左上角為準，大圖的滾動距離為left*相應比例
small.onmousemove = function(ent){ var e = ent || event; //獲取鼠標事件對象 var left = e.pageX - fdj.offsetLeft - shadow.offsetWidth/2; //獲取shadow在small內的相對位置 var top = e.pageY - fdj.offsetTop - shadow.offsetHeight/2; var tw = fdj.offsetWidth - shadow.offsetWidth; //獲取shadow最大可移動距離 var th = fdj.offsetHeight - shadow.offsetHeight; //對shadow進行限制 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'; //大圖跟著移動 var sl = left * big.offsetWidth / shadow.offsetWidth; var st = top * big.offsetHeight / shadow.offsetHeight; big.scrollTop = st; big.scrollLeft = sl; }4.鼠標移出，大圖以及shadow隱藏
small.onmouserout = function(){ big.style.display = 'none'; shadow.style.display = 'none'; }以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
