实现拖拽预览图片切换效果
2023-09-10 本文已影响0人
Hi小胡
<!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>
.noselect {
-moz-user-select: none;
/*火狐*/
-webkit-user-select: none;
/*webkit浏览器*/
-ms-user-select: none;
/*IE10*/
/*早期浏览器*/
user-select: none;
}
#box {
position: relative;
}
.img-box {
width: 100%;
position: absolute;
top: 0px;
left: 0px;
}
#white {
z-index: 1;
}
#black {
z-index: 2;
overflow: hidden;
}
#move {
position: absolute;
z-index: 3;
height: 563px;
width: 5px;
background: skyblue;
transform: translate(-50%, 0);
box-sizing: border-box;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
#move-box {
position: absolute;
width: 60px;
height: 60px;
background: skyblue;
border-radius: 50%;
border: 2px solid #fff;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
cursor: move;
box-sizing: border-box;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<div id="box" class="noselect">
<div id="white" class="img-box white">
<img draggable="false" class="img" src="./white.jpg" alt="" />
</div>
<div id="black" class="img-box" style="width: 500px">
<img draggable="false" class="img" src="./black.jpg" alt="" />
</div>
<div id="move" style="left: 500px">
<div id="move-box"></div>
</div>
</div>
<script>
window.onload = () => {
var startX, startY;
var width = 1000;
var moveX = width / 2;
var move_box = document.getElementById("move-box");
var move = document.getElementById("move");
var black = document.getElementById("black");
var box = document.getElementById("box");
box.style.width = width + "px";
var imgs = document.querySelectorAll(".img");
for (let i = 0; i < imgs.length; i++) {
const element = imgs[i];
element.style.width = width + "px";
}
move_box.onmousedown = (me) => {
startX = me.clientX;
startY = me.clientY;
document.onmousemove = (de) => {
var endX = de.clientX;
var endY = de.clientY;
var offsetX = endX - startX;
var offsetY = endY - startY;
var newLeft = moveX + offsetX;
if (newLeft <= 0) {
move.style.left = "0px";
} else if (newLeft >= width) {
move.style.left = width + "px";
} else {
move.style.left = newLeft + "px";
}
black.style.width = move.style.left;
};
document.onmouseup = () => {
moveX = parseFloat(move.style.left.replace("px", ""));
document.onmousemove = () => {};
};
};
};
</script>
</body>
</html>
