<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>鼠标拖动小方块</title>
<style type="text/css">
.lineDiv {
position: absolute;
height: 5px;
font-size: 0;
line-height: 0;
background: red;
width: 500px;
top: 100px;
left: 50%;
margin-left: -250px
}
.lineDiv .minDiv {
position: absolute;
top: -5px;
left: 0;
width: 15px;
height: 15px;
background: green;
cursor: pointer
}
</style>
</head>
<body>
<center>
<h3>用鼠标拖动小方块</h3></center>
<div id="lineDiv" class="lineDiv">
<div id="minDiv" class="minDiv"></div>
</div>
<script>
window.onload = function() {
var lineDiv = document.getElementById('lineDiv'); //长线条
var minDiv = document.getElementById('minDiv'); //小方块
var ifBool = false; //判断鼠标是否按下
//鼠标按下方块
minDiv.onmousedown = function(e) {
e.stopPropagation();
ifBool = true;
};
//拖动
window.onmousemove = function(e) {
e.stopPropagation();
if (ifBool) {
var x = e.clientX; //鼠标横坐标var x
var lineDiv_left = getPosition(lineDiv).left; //长线条的横坐标
var minDiv_left = (x - lineDiv_left) - 5; //小方块相对于父元素(长线条)的left值var minDiv_left
if (minDiv_left > lineDiv.offsetWidth - 5) {
minDiv_left = lineDiv.offsetWidth - 5;
}
if (minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
minDiv.style.left = minDiv_left + "px";
}
};
//鼠标松开
window.onmouseup =
自己动手写拖动滑块
最新推荐文章于 2024-03-14 10:59:30 发布
这篇博客详细介绍了如何编写一个兼容PC和移动端的拖动滑块功能,让用户体验流畅的交互操作。
摘要由CSDN通过智能技术生成