js实现拖动滑块效果
更新时间：2021年09月28日 09:26:46 作者：新时代农民工Top
这篇文章主要为大家详细介绍了js实现拖动滑块效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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>
运行
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
利用组存大法要提高我们程序的性能，让我们的正则表达式的创建于执行更有效率。2009-12-12
这篇文章主要总结分享10 个超棒的 JavaScript 简写技巧，有合并数组、克隆数组、解构赋值、模板字面量等技巧，需要的朋友可以参考一下2022-06-06
这篇文章主要介绍了微信小程序实现一个自定义遮罩层,大概效果是点击按钮Show显示遮罩层,再次点击屏幕任何地方隐藏遮罩层,本文结合实例代码给大家介绍的非常详细,需要的朋友可以参考下2023-09-09
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合
js+css使DIV始终居于屏幕中间 左下 左上 右上 右下的代码集合，需要的朋友可以参考下。2011-03-03
本篇文章主要介绍了js弹窗返回值(window.open方式)。需要的朋友可以过来参考下，希望对大家有所帮助2014-01-01
这篇文章主要介绍了基于JavaScript判断两个对象内容是否相等,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了JS实现的RGB网页颜色在线取色器,结合完整实例形式分析了基于JS运算及鼠标事件响应来操作页面元素实现取色器功能的方法,具有一定参考借鉴价值,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了js实现七夕表白弹幕效果，jQuery实现弹幕技术，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了JS 对象属性相关(检查属性、枚举属性等),需要的朋友可以参考下2015-04-04
JavaScript作用域、闭包、对象与原型链概念及用法实例总结
这篇文章主要介绍了JavaScript作用域、闭包、对象与原型链,结合实例形式总结分析了javascript中变量与函数的作用域、闭包、对象、原形链相关概念、用法及注意事项,需要的朋友可以参考下2018-08-08
最新评论