本文实例为大家分享了js如何拖动滑块的具体代码，供大家参考，具体内容如下
实现拖动滑块，先分析，滑块可以拖动应该改变滑块在页面中的坐标，那就采用定位拿到元素的 top 和 left 对它们进行赋值，接下来就是准备事件，既然是鼠标拖动应该具备 mousedown，mousemove，mouseup 三种事件，通过 mousedown 鼠标按下事件选中滑块，mousemove 事件拖动滑块，在拖动滑块的时候获取鼠标在可视窗口的坐标赋值给滑块的 top 和 left
具体代码实现
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 60px;
height: 60px;
background-color: coral;
border-radius: 20%;
position: absolute;
border: 6px solid skyblue;
left: 0;
top: 0;
}
</style>
</head>
<body>
<div></div>
<script>
let div = document.querySelector('div')
let x, y
let fn = function (e) {
// console.log('hhhhhhhh')
div.style.left = e.clientX - x + 'px'
div.style.top = e.clientY - y + 'px'
if (e.clientX - x < 30) {
div.style.left = 0
}
if (e.clientY - y < 30) {
div.style.top = 0
}
if (e.clientX - x > document.documentElement.clientWidth - div.offsetWidth - 30) {
div.style.left = document.documentElement.clientWidth - div.offsetWidth + 'px'
}
if (e.clientY - y > document.documentElement.clientHeight - div.offsetHeight - 30) {
div.style.top = document.documentElement.clientHeight - div.offsetHeight + 'px'
}
}
div.addEventListener('mousedown', function (e) {
x = e.offsetX
y = e.offsetY
document.addEventListener('mousemove', fn)
})
div.addEventListener('mouseup', function () {
document.removeEventListener('mousemove', fn)
})
</script>
</body>
</html>
运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持华域联盟。
您可能感兴趣的文章:
- JavaScript实现拖动滑块拼图验证功能（html5、canvas）
- js拖动滑块和点击水波纹效果实例代码
- Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
- 基于JavaScript实现拖动滑块效果
- 基于JS组件实现拖动滑块验证功能(代码分享)
- js用拖动滑块来控制图片大小的方法
- 原生JS封装拖动验证滑块的实现代码示例
- js实现兼容PC端和移动端滑块拖动选择数字效果
- JS响应鼠标点击实现两个滑块区间拖动效果
本文由 华域联盟 原创撰写：华域联盟 » js实现拖动滑块效果
转载请保留出处和原文链接：https://www.cnhackhy.com/82441.htm
