這篇文章給大家分享的是有關JavaScript如何實現商品放大鏡效果的內容。小編覺得挺實用的，因此分享給大家做個參考，一起跟隨小編過來看看吧。
具體內容如下
HTML+CSS部分：
<style>
.small{
position: relative;
width: 400px;
height: 450px;
border: 1px solid #ccc;
}
.small img{
width: 100%;
height: 100%;
}
.small .mask{
position: absolute;
left: 0;
top: 0;
width: 300px;
height: 300px;
background-color: rgba(0, 255, 0, .2);
}
.big{
position: absolute;
left: 450px;
top: 8px;
width: 550px;
height: 550px;
border: 1px solid #ccc;
overflow: hidden;
display: none;
}
.big img{
position: absolute;
left: 0;
top: 0;
}
</style>
<body>
<div class="small">
<img src="./img/small.jpg">
<div class="mask"></div>
</div>
<div class="big">
<img src="./img/big.jpg">
</div>
</body>JS部分：
<script>
var small=document.querySelector('.small');
var mask=document.querySelector('.mask');
var big=document.querySelector('.big');
var bigImg=document.querySelector('.big>img');
// 拿到大圖的寬高
var bigWidth=bigImg.offsetWidth;
var bigHeight=bigImg.offsetHeight;
//
function move(e){
var x=e.pageX - this.offsetLeft;
var y=e.pageY - this.offsetTop;
console.log(x,y);
// 移動遮罩位置
var maskHeight = mask.offsetHeight/2;
var maskWidth = mask.offsetWidth/2;
mask.style.left = x - maskWidth+'px';
mask.style.top = y - maskHeight+'px';
// 限制遮罩的移動范圍
// console.log('mask.offsetTop',mask.offsetTop);
// console.log('mask.offsetLeft',mask.offsetLeft);
var maxLeft=small.offsetWidth - mask.offsetWidth;
if(mask.offsetTop<0){
mask.style.top=0;
}
if(mask.offsetLeft > small.offsetWidth - mask.offsetWidth){
mask.style.left =maxLeft+'px';
}
if(mask.offsetLeft<0){
mask.style.left = 0;
}
if(mask.offsetTop > small.offsetHeight - mask.offsetHeight){
mask.style.top = small.offsetHeight - mask.offsetHeight + 'px';
}
// bigImg 大圖 big 大盒子 大圖的移動
// (bigImg.offsetWidth - big.offsetWidth) / (samll.offsetWidtth - mask.offsetWidth)
// 大圖的最大移動距離 = - 遮罩的移動距離 * 大圖的最大距離 / 遮罩的最大移動距離
bigImg.style.left = -mask.offsetLeft*(bigImg.offsetWidth - big.offsetWidth) / (small.offsetWidth - mask.offsetWidth)+"px";
bigImg.style.top = -mask.offsetTop*(bigImg.offsetHeight - big.offsetHeight) / (small.offsetHeight - mask.offsetHeight)+"px";
}
// 小圖上移動遮罩
small.addEventListener('mousemove',move);
small.addEventListener('mouseover',function(){
big.style.display='block';
mask.style.display='block';
})
small.addEventListener('mouseout',function(){
big.style.display='none';
mask.style.display='none';
})
</script>效果演示：
感謝各位的閱讀！關于“JavaScript如何實現商品放大鏡效果”這篇文章就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識，如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
