body {
background-color: #D8E7FA;
}
/*取消默認(rèn)樣式*/
ul {
margin: 0px;
padding: 0px;
list-style: none;
}
/*大框樣式*/
.itmearea {
position: relative;
width: 400px;
height: 480px;
border: 1px solid #888;
margin: 100px auto;
}
/*下面的距離*/
.itmearea .pic {
margin-bottom: 15px;
}
/*大框里面的小框*/
.itmearea .pic .cover {
display: none;
position: absolute;
cursor: all-scroll;
left: 0;
top: 0;
width: 200px;
height: 200px;
opacity: .2;
z-index: 3;
background: 50% top no-repeat #000;
}
/*圖片大小*/
.itmearea .pic img {
width: 400px;
height: 400px;
}
/*大框下面的小圖片框*/
.itmearea .list {
display: flex;
}
/*每一個(gè)小圖*/
.itmearea .list li {
margin: auto;
}
/*小框里的圖片*/
.itmearea .list img {
display: block;
width: 50px;
height: 50px;
}
/*隱藏的放大鏡*/
.itmearea .deteil {
position: absolute;
display: none;
top: -1px;
left: 400px;
width: 500px;
height: 479px;
border: 1px solid #888;
background-image: url(img/1.jpg);
background-size: 150%;
}
/*大框下移入小框的邊框*/
.itmearea .list .current {
border: 2px red solid;
}
<div class="itmearea">
<div class="pic">
<img src="img/1.jpg" />
<div class="cover"></div>
</div>
<ul class="list">
<li><img src="img/1.jpg" class="current" /></li>
<li><img src="img/2.jpg" /></li>
<li><img src="img/3.jpg" /></li>
<li><img src="img/4.jpg" /></li>
<li><img src="img/5.jpg" /></li>
</ul>
<div class="deteil"></div>
</div>
var list = document.querySelector('.list'),
imgs = list.querySelectorAll('img'),
img = document.querySelector('.pic img'),
pic = document.querySelector('.itmearea .pic'),
cover = document.querySelector('.cover'),
deteil = document.querySelector('.deteil');
//鼠標(biāo)移入監(jiān)聽事件
list.addEventListener('mousemove', function(e) {
//根據(jù)標(biāo)簽判斷 , 移入哪個(gè)img圖片
if(e.target.tagName == 'IMG') {
img.src = e.target.src;
//顯示哪一張圖片
deteil.style.backgroundImage = 'url(' + e.target.src + ')';
// 遍歷圖片 清空樣式
imgs.forEach(function(item) {
item.className = '';
})
//給當(dāng)前圖片添加一個(gè)class類 兩像素的邊框
e.target.className = 'current';
}
})
//給大框綁定鼠標(biāo)移入事件
pic.addEventListener('mousemove', function(e) {
var x = e.clientX,
y = e.clientY,
cx = pic.getBoundingClientRect().left,
cy = pic.getBoundingClientRect().top,
tx = x - cx - 100,
ty = y - cy - 100;
if(tx < 0) {
tx = 0;
}
if(ty < 0) {
ty = 0;
}
if(tx > 200) {
tx = 200;
}
if(ty > 200) {
ty = 200;
}
//鼠標(biāo)移入小框 和 放大鏡顯示
cover.style.display = 'block'
deteil.style.display = 'block'
//顯示放大鏡的位置
deteil.style.backgroundPosition = tx / 200 * 100 + '% ' + ty / 200 * 100 + '%';
//小框的位置
cover.style.left = tx + 'px';
cover.style.top = ty + 'px';
})
//鼠標(biāo)移出 不顯示
pic.addEventListener('mouseout', function() {
cover.style.display = 'none'
deteil.style.display = 'none'
});