溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下JavaScript實現京東放大鏡效果的方法，希望大家閱讀完這篇文章之后都有所收獲，下面讓我們一起去探討吧！
本文實例為大家分享了JavaScript實現京東放大鏡展示的具體代碼，供大家參考，具體內容如下
實現效果：
1.鼠標放到圖片上顯示放大鏡和詳細圖，鼠標離開時什么都不顯示（效果消失）
2.鼠標一直在放大鏡的中間，且放大鏡隨鼠標移動
3.放大鏡不能出縮列圖的盒子
4.鼠標放在詳細圖上詳細圖消失
實現細節：
1.大盒子雖然比詳細圖的盒子寬度小，但是在邏輯上詳細圖的盒子屬于大盒子
2.詳細圖不能使用浮動，因為盒子下面一般會有文字內容
3.以父盒子來定位詳細圖的盒子
4.放大鏡鼠標選中為十字形
5.對圖片進行定位才能使圖片移動
6.使用var evt = event || window.event; //兼容性寫法
7.用放大鏡頂點在盒子中的位置根據比例找到圖片的位置，來顯示圖片
8.圖片在詳細圖中的定位為負值
代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>京東放大鏡</title>
<style>
.box{ /*大盒子雖然比詳細圖的盒子寬度小，但是在邏輯上詳細圖的盒子屬于大盒子*/
width: 350px;
height: 350px;
position: relative;
margin: 100px;
border: 1px solid #aaa;
}
.box .detailed{ /*詳細圖不能使用浮動，因為盒子下面一般會有文字內容*/
width: 450px;
height: 450px;
border: 1px solid #aaa;
position: absolute;
overflow: hidden;
left: 365px; /*以父盒子來定位*/
top: 0;
/*初始設置為不可見*/
display: none;
}
.box .normal .magnfier{
width: 150px;
height: 150px;
top: 0;
left: 0;
position: absolute;
background-color: rgba(0, 0, 255, 0.2);/*也可以用opacity來設置透明度*/
cursor: move; /*鼠標選中為十字*/
display: none; /*初始設為不可見*/
}
.detailed img{ /*對圖片進行定位使圖片移動*/
position: absolute;
top: 0;
left: 0;
}
</style>
<script>
function $(id){
return document.getElementById(id);
}
window.onload = function(){
var box = $('box');
var normal = box.children[0];
var margnfier = normal.children[1];//獲取放大鏡的Dom對象，document.getElementsByClassName來獲取。
var detailed = box.children[1];//獲得縮略圖DOM對象也可以用document.getElementsByClassName('zoom')[0];
var detailedImg = box.children[1].children[0];
normal.onmouseover = function(){//不能給box注冊onmousever事件，否則快速移到詳細圖上是詳細圖也不會消失，
margnfier.style.display = 'block';
detailed.style.display = 'block';
}
normal.onmouseout = function(){
margnfier.style.display = 'none';
detailed.style.display = 'none';
}
var x = 0;
var y = 0;
//控制zoom放大鏡部分在normal里面的移動
normal.onmousemove = function(event){
var evt = event || window.event;
//兼容性寫法
x = evt.clientX - box.offsetLeft - margnfier.offsetWidth / 2;
y = evt.clientY - box.offsetTop - margnfier.offsetHeight / 2;
//判斷鼠標是不是溢出了normal的區域，
if(x < 0){
x = 0;
}else{
if(x > box.offsetWidth - margnfier.offsetWidth){
x = box.offsetWidth - margnfier.offsetWidth;
}
}
if(y < 0){
y = 0;
}else{
if(y > box.offsetHeight - margnfier.offsetHeight){
y = box.offsetHeight - margnfier.offsetHeight;
}
}
margnfier.style.left = x + 'px';
margnfier.style.top = y + 'px';
var detailedX = -x * 800 / this.offsetWidth;
var detailedY = -y * 800 / this.offsetHeight;
//用放大鏡頂點在盒子中的位置根據比例找到圖片的位置，來顯示圖片
//改變圖片位置
detailedImg.style.left = detailedX + 'px';
detailedImg.style.top = detailedY + 'px';
}
}
</script>
</head>
<body>
<div id="box" class="box"> <!--包含詳細圖和縮略圖的盒子-->
<div class="normal">
<img src="imgs/show.jpg" alt="">
<div class="magnfier"></div>
</div>
<div class="detailed">
<img src="imgs/detail.jpg" alt="">
</div>
</div>
</body>
</html>
看完了這篇文章，相信你對“JavaScript實現京東放大鏡效果的方法”有了一定的了解，如果想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
