小編給大家分享一下js怎么模擬實現淘寶網商品放大鏡效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！
效果圖：（實例圖片由自己添加）
代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>仿淘寶放大鏡特效</title>
<style type="text/css">
*{margin: 0;padding: 0;}
#demo{width:350px;height:350px;border: 1px solid #000;position:relative;margin:100px;}
#smil_box{width: 350px;height: 350px;position:relative;}
#mask{width:175px;height: 175px;background:rgba(255,255,0,0.4);position:absolute;top:0;left:0;display:none;cursor:move;}
#big_box{width: 400px;height: 400px;position:absolute;top:0;left:360px;border: 1px solid #000;overflow:hidden;display:none;}
#big_box img{position:absolute;top:0;left:0;}
</style>
</head>
<body>
<div id="demo">
<div id="smil_box">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=193662baf63738c68b594f3ec920769f" height="350" width="350" alt="">
<div id="mask"></div>
</div>
<div id="big_box">
<img src="http://www.qdfuns.com/misc.php?mod=attach&genre=editor&aid=3e8b3554eb90dd13fa0f82465ac6d382" height="800" width="800" alt="" id="big_img">
</div>
</div>
</body>
<script type="text/javascript">
(function(window){
function $(id){
return document.getElementById(id);
};
// 獲取對象
var demo = $("demo"),smilBox = $("smil_box"),mask = $("mask"),bigImg = $("big_img"),bigBox = $("big_box");
// smilBox的hover事件
smilBox.onmouseover = function(){
mask.style.display = "block";
bigBox.style.display = "block";
};
smilBox.onmouseout = function(){
mask.style.display = "none";
bigBox.style.display = "none";
};
// 鼠標移動事件
smilBox.onmousemove = function(event){
var event = event || window.event;
// 獲取鼠標在頁面上的坐標
var pageX = event.pageX || event.clientX + document.documentElement.scrollLeft;
var pageY = event.pageY || event.clientY + document.documentElement.scrollTop;
// mask的位置坐標
var boxX = pageX - demo.offsetLeft;
var boxY = pageY - demo.offsetTop;
var maskX = boxX - mask.offsetWidth / 2;
var maskY = boxY - mask.offsetHeight / 2;
// 限制mask的移動范圍
if( maskX < 0 ){
maskX = 0;
};
if( maskX > smilBox.offsetWidth - mask.offsetWidth){
maskX = smilBox.offsetWidth - mask.offsetWidth;
};
if( maskY < 0 ){
maskY = 0;
};
if( maskY > smilBox.offsetHeight - mask.offsetHeight){
maskY = smilBox.offsetHeight - mask.offsetHeight;
};
// 黃色遮罩層的位置坐標
mask.style.top = maskY + "px";
mask.style.left = maskX + "px";
// 大圖片移動的比例
var prop = ( bigImg.offsetWidth - bigBox.offsetWidth ) / (smilBox.offsetWidth - mask.offsetWidth);
// 大圖片的坐標
var bigImgX = prop * maskX;
var bigImgY = prop * maskY;
bigImg.style.top = -bigImgY + "px";
bigImg.style.left = -bigImgX + "px";
}
})(window)
</script>
</html>以上是“js怎么模擬實現淘寶網商品放大鏡效果”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
