javaScript實現放大鏡特效
阿新 • • 發佈：2021-11-10
要實現的效果：滑鼠放到小圖片上小圖片上方會出現一個小塊，這個小塊裡面的區域會放大顯示到右邊大圖裡面（如下圖所示）
這個效果主要用到的是：滑鼠的座標e.clientX，e.clientY,偏移量offsetLeft，offsetTop,offsetWidth,sffsetHeight等屬性。
HTML和程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#2c3e50;
}
.wrap{
display: flex;
position: relative;
left: 200px;
top: 30px;
}
.small{
width: 500px;
height: 300px;
border-radius: 20px;
overflow: hidden;
position: relative;
left: 0px;
}
.small img{
width: 100%;
height: 100%;
}
.small span{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: rgba(0,0.5);
cursor: pointer;
z-index: 1;
}
.big{
display: nonwww.cppcns.com 部分：
滑鼠移入放大鏡（小圖上的小塊）顯示，右邊大圖顯示
//最大的容器
let wrap=document.querySelector('.wrap');
//小圖部分
let smallWrap=document.querySelector('.wrap .small');
let smallImg=document.querySelector('.wrap .small img');
let smallBox=document.querySelector('.wrap .small span');
//大圖部分
let bigBox=document.querySelector('.wrap .big');
let bigImg=document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
smallBox.style.display="block";
bigBox.style.display="block";
}滑鼠在小圖上移動時放大鏡跟隨移動，用event物件的event.clientX,和event.clientY來獲取滑鼠的座標。
通過event.clientX和event.clientY可以得到滑鼠的位置，父容器的偏移量,發大鏡的偏移量（實際專案中可能會給發大鏡設定偏移量，為了去掉這個偏移量的影響要減去這個偏移量），放大鏡效果中滑鼠一直都在小塊的中間位置，所以移動的位置就可以了這樣去的。
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
}
到這一步放大鏡就會跟隨滑鼠移動了，還要加個範圍限定，不然發大鏡移動距離就會超過小圖片了
範圍限定
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//範圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
http://www.cppcns.com moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//範圍限定方法二
moveX=Math.min(maxX,Math.max(0,moveX))
moveY=Math.min(maxY,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
}
放大鏡跟隨滑鼠移動實現之後，接下來就需要實現發大鏡移動時，大圖也跟著移動（大圖移動的方向是相反的），發大鏡移動的距離與大圖移動的距離是成正比的，小圖的寬度與大圖片（包過未顯示部分）的寬度也是成正比的，小圖可以移動動的最大距離和大圖可以動的最大距離也是成正比的，所以可以通過這二個公式求得大圖應該移動多少。
放大鏡移動的距離/小圖的寬度=大圖移動的距離/大圖的寬度 這個公式雖然可以實現但是沒有限定最大可移動距離會出現這種效果
所以這個公式裡要這樣寫最好放大鏡移動的距離/小圖的寬度-放大鏡的寬度（這是放大鏡最大的移動範圍）
放大鏡移動的距離/（小圖的寬度-放大鏡的寬度）=大圖移動的距離/（大圖的寬度-大圖顯示區域）
注意大圖移動的方向與放大鏡移動的方向是相反的！
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//範圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//範圍限定方法二
moveX=Math.min(maxX,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移動位置
let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);
bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
}
最後再加上滑鼠移出事件，滑鼠移出，放大鏡和大圖隱藏
smallWrap.onmouseout=function(){
smallBox.style.display="none";
bigBox.style.display="none";
}
全部程式碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
background:#2c3e50;
}
.wrap{
display: flex;
position: relative;
left: 200px;
top: 30px;
}
.small{
width: 500px;
height: 300px;
border-radius: 20px;
overflow: hidden;
position: relative;
left: 100px;
}
.small img{
width: 100%;
height: 100%;
}
.small span{
display: none;
position: absolute;
left: 0;
top: 0;
width: 100px;
height: 100px;
background: rgba(0,0.5);
cursor: pointer;
z-index: 1;
}
.big{
display: none;
width: 400px;
height: 400px;
overflow: hidden;
position: relative;
left: 120px;
top: 0;
}
.big img{
position: absolute;
left: 0;
top: 0;
width: 1000px;
height: 600px;
}
</style>
</head>
<body>
<div class="wrap">
<div class="small">
<img src="img/33.jpg" alt="javaScript實現放大鏡特效">
<span></span>
</div>
<div class="big">
<img src="img/33.jpg" alt="javaScript實現放大鏡特效">
</div>
</div>
<script>
//最大的容器
let wrap=document.querySelec客棧tor('.wrap');
//小圖部分
let smallWrap=document.querySelector('.wrap .small');
let smallImg=document.querySelector('.wraphttp://www.cppcns.com .small img');
let smallBox=document.querySelector('.wrap .small span');
//大圖部分
let bigBox=document.querySelector('.wrap .big');
let bigImg=document.querySelector('.wrap .big img');
smallWrap.onmouseover=function(){
smallBox.style.display="block";
bigBox.style.display="block";
}
smallWrap.onmousemove=function(e){
let moveX=e.clientX-wrap.offsetLeft-smallWrap.offsetLeft-smallBox.offsetWidth/2;
let moveY=e.clientY-wrap.offsetTop-smallWrap.offsetTop-smallBox.offsetHeight/2;
let maxX=smallWrap.offsetWidth-smallBox.offsetWidth;
let maxY=smallWrap.offsetHeight-smallBox.offsetHeight;
//範圍限定方法一
/* if(moveX<0){
moveX=0;
}else if(moveX>=maxX){
moveX=maxX
}
if(moveY<0){
moveY=0;
}else if(moveY>=maxY){
moveY=maxY
} */
//範圍限定方法二
moveX=Math.min(maxX,moveY))
smallBox.style.left=moveX+'px'
smallBox.style.top=moveY+'px'
let left=moveX/(smallImg.offsetWidth-smallBox.offsetWidth);//smallImg.offsetWidth-smallBox.offsetWidth最大移動位置
let top=moveY/(smallImg.offsetHeight-smallBox.offsetHeight);
bigImg.style.left=-left*(bigImg.offsetWidth-bigBox.offsetWidth)+'px'
bigImg.style.top=-top*(bigImg.offsetHeight-bigBox.offsetHeight)+'px'
}
smallWrap.onmouseout=function(){
smallBox.style.display="none";
bigBox.style.display="none";
}
</script>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。