鼠标实现图片放大跟随鼠标
<style>
.picture-list img {
width: 300px;
height: 80px;
}
.big-picture img {
width: 600px;
height: 160px;
}
.big-picture {
position: absolute;
}
</style>
</head>
<!-- 图片大图显示 -->
<body>
<div class="picture-list">
<img src="img/banner_1.jpg" alt="">
<img src="img/banner_2.jpg" alt="">
<img src="img/banner_3.jpg" alt="">
</div>
<div class="big-picture"></div>
<script>
// 获取对象节点进行操作
let imglist = document.querySelectorAll(`.picture-list img`);
let bigpic = document.querySelector(`.big-picture`);
let picList = document.querySelector(`.picture-list`);
// 数组遍历循环显示
for (let i in imglist) {
imglist[i].onmouseenter = function () {
console.log(this.src);
bigpic.innerHTML = ` <img src="${this.src}" alt="">`;
}
imglist[i].onmouseleave = function () {
bigpic.innerHTML = ``;
}
}
picList.onmousemove = function (e) {
let x = e.clientX;
let y = e.clientY;
// 细节加像素距离,避免重复显示图片掉帧,变得更顺滑!
console.log(`x坐标${x},y坐标${y}`);
bigpic.style.top = y + 10 + "px";
bigpic.style.left = x + 10 + "px";
}
</script>
</body>
学习记录,自检!