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>
运行
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
相关文章
javascript中的parseInt和parseFloat区别
这篇文章用简单的小例子演示了parseInt和parseFloat区别,有需要的朋友可以参考一下2013-07-07比JSON.stringify快两倍的fast-json-stringify性能对比分析
这篇文章主要为大家介绍了比JSON.stringify快两倍的fast-json-stringify性能对比分析,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪2022-12-12JS小功能(setInterval实现图片效果显示时间)实例代码
这篇文章主要介绍了setInterval实现图片效果显示时间实例代码,有需要的朋友可以参考一下2013-11-11
最新评论