溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹原生js實現放大鏡的示例分析，文中介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們一定要看完！
原理：左邊陰影在左邊圖片上從左到右移動的時候，右邊大框也在右邊大圖片上從左到右移動（盡管在視覺、原理和代碼上是相反的）；所謂放大，其實就是一張原本就很小的圖對應一張原本就很大的圖。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
*{
margin:0;
padding:0;
}
.small{
width: 400px;
height: 400px;
position: relative;
background: url(http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=7dca2c442134be6a652e087296c8ac80) no-repeat center;
border: 1px solid #ccc;
}
.small .inner{
width: 100px;
height: 100px;
background: yellow;
opacity: 0.5;
filter: alpha(opacity=50);
position: absolute;
left:0;
top:0;
display: none;
}
.big{
width: 400px;
height: 400px;
position: absolute;
left:410px;
top:0;
overflow: hidden;
border: 1px solid #ccc;
display: none;
}
.big img{
width: 200%;
height: 200%;
position: absolute;
left:0;
top:0;
}
</style>
</head>
<body>
<div id="small" class="small">
<div class="inner"></div>
</div>
<div id="big" class="big">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=d7dec5aeff022ea80c47eb76dc5838d8" alt=""/>
</div>
<script>
var small=document.getElementById('small');
var inner=small.getElementsByTagName('div')[0];
var big=document.getElementById('big');
var img=big.getElementsByTagName('img')[0];
//當鼠標移入small的時候，inner和big顯示
small.onmouseover=function(){
big.style.display='block';
inner.style.display='block';
};
//當鼠標在small移動的時候：1）鼠標在inner的中間 2）inner跟隨鼠標移動
small.onmousemove=function(e){
e=e||window.event;
var left=e.clientX-this.offsetLeft-inner.offsetWidth/2;
var top=e.clientY-this.offsetTop-inner.offsetHeight/2;
if(left<=0){
left=0;
}else if(left>=this.offsetWidth-inner.offsetWidth){
left=this.offsetWidth-inner.offsetWidth
}
if(top<=0){
top=0;
}else if(top>=this.offsetHeight-inner.offsetHeight){
top=this.offsetHeight-inner.offsetHeight
}
inner.style.left= left+'px';
inner.style.top= top+'px';
//當inner移動的時候，大圖跟著一起移動，并且，大圖和inner移動的方向相反；
//或者理解為：左邊陰影在圖片上從左到右移動的時候，右邊大框也在大圖片上從左到右移動（盡管視覺上是相反的）。
img.style.left=left/(small.offsetWidth-inner.offsetWidth)*(big.offsetWidth-img.offsetWidth)+'px';
img.style.top=top/(small.offsetHeight-inner.offsetHeight)*(big.offsetHeight-img.offsetHeight)+'px';
};
//當鼠標移出的時候，inner和big隱藏；
small.onmouseout=function(){
big.style.display='none';
inner.style.display='none';
}
</script>
</body>
</html>以上是“原生js實現放大鏡的示例分析”這篇文章的所有內容，感謝各位的閱讀！希望分享的內容對大家有幫助，更多相關知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
