原生js簡單實現(xiàn)放大鏡特效
本文實例為大家分享了js實現(xiàn)放大鏡特效展示的具體代碼，供大家參考，具體內(nèi)容如下
普及知識：放大鏡特效涉及到的幾個值
offsetWidth 獲取元素的寬度
offsetHeight 獲取元素的高度
offsetLeft父元素沒有定位時，獲取元素距離頁面的左邊距，父元素有定位時，獲取元素距離父元素的左邊距
offsetTop父元素沒有定位時，獲取元素距離頁面的上邊距，父元素有定位時，獲取元素距離父元素的上邊距
scrollTop 內(nèi)容滾動的上邊距
scrollLeft 內(nèi)容滾動的左邊距
onmousemove 鼠標(biāo)移動事件
onmouseover 鼠標(biāo)劃過事件
主要思路：
1.鼠標(biāo)移動，陰影區(qū)跟著移動
2.鼠標(biāo)移動，大圖也跟著移動
3.陰影區(qū)域與小圖的比例 以及 大圖顯示區(qū)域與大圖的比例 是一樣的
4.保證陰影區(qū)域以及大div.big在鼠標(biāo)移動到div.small時顯示
html實現(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實現(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)移入的時候，顯示大圖顯示區(qū)以及陰影區(qū)域
small.onmouseover = function(){
big.style.display = 'block';
shadow.style.display = 'block';
}
3.
（1）鼠標(biāo)移動，div.shadow跟著移動，先獲取到shadow在small內(nèi)的相對位置，已知鼠標(biāo)點擊位置距離頁面的邊距，fdj距離頁面的邊距，fdj以及shadow的寬高，讓鼠標(biāo)劃過的位置一直位于shadow區(qū)域的中心點，所以可得shadow在small內(nèi)的相對位置，之后進行判斷，讓shadow不能出邊界，最后進行賦值操作
（2）shadow區(qū)域移動，大圖顯示相應(yīng)的位置，即大圖滾動相應(yīng)的距離，大圖和shadow的比例為big.offsetWidth/shadow.offsetWidth，以shadow的左上角為準(zhǔn)，大圖的滾動距離為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最大可移動距離
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.鼠標(biāo)移出，大圖以及shadow隱藏
small.onmouserout = function(){
big.style.display = 'none';
shadow.style.display = 'none';
}
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
由于業(yè)務(wù)需要，要求實現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下2021-05-05
JavaScript 中的 new、bind、call、apply 實際這些都離不開 this，因此本文將著重討論 this，在此過程中分別講解其他相關(guān)知識點。2020-09-09
jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框
為了滿足用戶體驗度，使用SweetAlert插件實現(xiàn)響應(yīng)式提示框效果非常好，下面通過這篇文章給大家介紹jquery SweetAlert插件實現(xiàn)響應(yīng)式提示框，需要的朋友可以參考下2015-08-08
在ECMAScript 6增加了一個對象,它不是新的語法或新的內(nèi)置對象,而一種協(xié)議（ 迭代器協(xié)議）,所有遵守這個協(xié)議的對象,都可以稱之為迭代器,這篇文章主要給大家介紹了關(guān)于ECMAScript中迭代器的相關(guān)資料,需要的朋友可以參考下2021-08-08
這篇文章主要介紹了JavaScript中包裝對象的一些知識點，包括內(nèi)置對象等2013-08-08
In Javascript Class, how to call the prototype method.(three
In Javascript Class, how to call the prototype method.(three method)...2007-01-01
javascript事件的綁定基礎(chǔ)實例講解（34）
這篇文章主要為大家詳細介紹了javascript事件的綁定基礎(chǔ)實例，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
localstorage實現(xiàn)帶過期時間的緩存功能
這篇文章主要介紹了localstorage實現(xiàn)帶過期時間的緩存功能,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-06-06
JSON是一種輕量級的數(shù)據(jù)交換格式，采用完全獨立于語言的文本格式，是理想的數(shù)據(jù)交換格式。本文給大家介紹JS操作JSON方法總結(jié)，非常不錯具有參考借鑒價值，感興趣的朋友一起學(xué)習(xí)吧2016-06-06
這篇文章主要為大家詳細介紹了JS及PHP代碼編寫八大排序算法的相關(guān)資料，感興趣的小伙伴們可以參考一下2016-07-07