一滑块跟随鼠标移动
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
cursor: move;
background-color: blueviolet;
position: absolute;
/* 开启定位才会有用left top */
left: 0px;
top: 0px;
/* margin: 用margin会有问题; */
}
</style>
</head>
<body>
<!-- 元素放在另一个元素的中间
-->
<div></div>
<script>
let div = document.querySelector("div");
div.addEventListener("mousedown", function (e) {
var mousex = e.clientX;//鼠标点下的x
var mousey = e.clientY;//鼠标点下的y
var boxx = div.offsetLeft;//鼠标点下盒子的x
var boxy = div.offsetTop; //鼠标点下盒子的y
document.onmousemove = function fn(e2){
var linex = e2.clientX;//鼠标移动后的x
var liney = e2.clientY;//鼠标移动后的y
var zongx = linex - mousex;//鼠标移动量x
var zongy = liney - mousey;//鼠标移动量y
div.style.left = zongx+boxx+"px";//鼠标移动量加上初始盒子的量就是最后盒子该到的x
div.style.top = zongy+boxy+"px" ;//鼠标移动量加上初始盒子的量就是最后盒子该到的y
}
})
div.addEventListener("mouseup",function(){
document.onmousemove=null;//移除监听事件
})
</script>
注意:这里为什么没有选择给div加移动事件的监听而是选择给doucument加是为了避免在移动事件的监听时间里划出div产生的bug。
二,图片放大效果附带选项卡功能
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.box {
width: 400px;
height: 400px;
position: relative;
left: 200px;
top: 150px;
}
img {
width: 400px;
height: 400px;
}
.mask {
width: 200px;
height: 200px;
position: absolute;
left: 0;
top: 0;
background: url(../Aimg/网格.jpg) no-repeat;
background-size: 200px 200px;
opacity: 0.4;
display: none;
}
.big {
width: 600px;
height: 600px;
position: absolute;
left: 405px;
top: 0;
border: 1px solid red;
display: none;
background-image: url(../Aimg/猴子地狱火.jpg);
background-size: 1000px 1000px;
background-repeat: no-repeat;
}
ul,
li {
list-style: none;
}
li img {
width: 100px;
height: 100px;
}
ul {
width: 100px;
height: 500px;
position: absolute;
top: 140px;
left: 0px;
}
</style>
</head>
<body>
<div class="box">
<img src="../Aimg/猴子地狱火.jpg" alt="" class="show">;
<div class="mask"></div>
<div class="big" style="background-image: url(../Aimg/猴子地狱火.jpg);"></div>
</div>
<!-- ...................................... -->
<ul>
<li>
<img src="../Aimg/猴子地狱火.jpg" alt="">
</li>
<li>
<img src="../Aimg/公孙离花间舞.jpg" alt="">
</li>
<li>
<img src="../Aimg/韩信白龙吟.jpg" alt="">
</li>
<li>
<img src="../Aimg/貂蝉仲夏夜之梦.jpg" alt="">
</li>
</ul>
<!-- .............................................. -->
<script>
window.onload = function () {
let box = document.querySelector(".box");
let mask = document.querySelector(".mask");
let big = document.querySelector(".big");
let rect = box.getBoundingClientRect();
function move(e) {
let y = e.pageY - mask.offsetHeight / 2 - rect.top;
let x = e.pageX - mask.offsetWidth / 2 - rect.left;
if (x <= 0) {
x = 0;
} else if (x >= 200) {
x = 200;
}
if (y <= 0) {
y = 0;
} else if (y >= 200) {
y = 200;
}
mask.style.left = x + "px";
mask.style.top = y + "px";
big.style.backgroundPosition = `${-2 * x}px ${-2 * y}px`;
}
box.addEventListener("mousemove", move);
box.addEventListener("mouseenter", function () {
mask.style.display = "block";
big.style.display = "block";
});
box.addEventListener("mouseleave", function () {
mask.style.display = "none";
big.style.display = "none";
});
let show = document.querySelector(".show")
let li = document.querySelector("ul");
li.addEventListener("click", function (e) {
show.src = e.target.src;
console.log(big.style.backgroundImage)
big.style.backgroundImage=(`url(${e.target.src})`);
})
}
</script>
</body>
</html>
注意这个效果写的时候应该注意每个坐标怎么样去获取,代表的什么意思还有鼠标事件不能用mouseover和mouseout因为这组方法会冒泡。会影响使用体验和产生bug。下面是效果图。