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, ylet 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.offsetXy = e.offsetYdocument.addEventListener('mousemove', fn)})div.addEventListener('mouseup', function () {document.removeEventListener('mousemove', fn)})</script>
</body></html>

运行

js 如何实现拖动滑块相关推荐

html css工资条样式,JS+CSS3交互式拖动滑块选择工资条代码
一款JS+CSS3交互式拖动滑块选择工资条代码,可以托工工资下面的滑块来实时改变工资的数值大小,除了数字变化的同时还有一个颜色的平滑变化,当数值到最大值时,有一个文字的摆动动画特效. 查看演示下载资 ...
css3 滑动验证,Vue 实现拖动滑块验证功能(只有css+js没有后台验证步骤)
vue验证滑块功能,在生活中很多地方都可以见到,那么使用起来非常方便,基于vue如何实现滑块验证呢?下面通过代码给大家讲解. 效果图如下所示: 拖动前拖动后代码引用的css与js都是线上的将代码 ...
原生js实现拖动滑块验证
拖动滑块验证是现在的网站随处可见的,各式各样的拖动法都有. 下面实现的是某宝的拖动滑块验证: <!DOCTYPE html> <html lang="en"> ...
拖动滑块验证——原生JS
** 拖动滑块验证--原生JS ** 大体思路: 1,拖动滑块验证我们首先要分析需要什么事件,怎么触发拖动滑块. 2,首先需要点击事件,当你点击鼠标的时候获取到一个X轴的距离. 3,还需要一个鼠标移动 ...
html实现鼠标移动波纹效果,js实现拖动滑块和点击水波纹效果
本篇文章就给大家介绍js实现拖动滑块效果和点击水波纹效果的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助. 拖动滑块效果: 先看看效果图: Document input[type ...
jQuery手机触屏拖动滑块验证跳转插件
HTML: <!DOCTYPE html> <html lang="en"> <head> <title>jQuery手机触屏拖动滑 ...
拖动滑块验证--vue实现
代码引用的css与js都是线上的将代码全部复制到一个html中可以直接打开,极其简单. 来分析一下代码底色div上放了一个变色div再放一个提示字的div最后加一个滑块div 给滑块div绑定鼠标 ...
js原生刻度尺滚动滑块插件
为什么80%的码农都做不了架构师?>>> js原生刻度尺滚动滑块插件用的MUI框架,原生兼容性很好,性能也更好,所以费了很大的力气改成原生的分享给大家. 有时间了改成手机版. ...
小程序拖动滑块验证（自定义组件插件分享）
效果图: 文章目录: #1 创建组件 #2 组件编码 MoveVerify.wxss MoveVerify.wxml MoveVerify.js #3 页面引用在页面的 json 文件中引用组件在 ...
JavaScript实现拖动滑块验证（方法已封装）
前提之前写了一篇博文,题目是<JavaScript实现拖动滑块验证>,里面都是用最简单的方式实现的.后来,群里大神推荐了一款unlock.js插件,称作幻灯片解锁插件.在这里附上它的gi ...

js 如何实现拖动滑块

js 如何实现拖动滑块

js 如何实现拖动滑块相关推荐

最新文章

热门文章