时间:2021-05-25
拖拽属于前端常见的功能,很多效果都会用到js的拖拽功能。滑动条的核心功能也就是使用js拖拽滑块来修改位置。一个完整的滑动条包括 滑动条、滑动痕迹、滑块、文本 等元素,先把html代码写出来,如下所示:
<div class="bar_wrap" id="wrap"><!--外包裹元素--> <div class="bar_container"><!--滑动条--> <div class="bar_into"></div><!--滑动痕迹--> </div> <div class="bar_drag"><!--滑块--> <div class="bar_text"></div><!--文本--> </div></div>然后给各元素添加css样式,完成下图效果:
接下来通过分析功能,一步一步完成js代码。
1. 获取滑动条各个元素,代码如下:
//获取外包裹元素 var eBarWrap = document.getElementById('wrap'); //获取滑动条 var eBarCon = eBarWrap.getElementsByClassName('bar_container')[0]; //获取滑动痕迹元素 var eBarInto = eBarWrap.getElementsByClassName('bar_into')[0]; //获取滑块 var eBarDrag = eBarWrap.getElementsByClassName('bar_drag')[0]; //获取文本元素 var eBarText = eBarWrap.getElementsByClassName('bar_text')[0];2. 获取滑动最大值
因为滑块只能在滑动条内滑动,所以需要限制最大滑动位置。而DOM元素计算位置是从元素的左侧开始,所以最大值应该是 滑动条的宽度-滑块 的宽度,如下所示:
3. 在滑块上绑定鼠标按下事件函数,实现拖拽滑块功能,代码如下:
//滑块添加拖拽事件 eBarDrag.addEventListener('mousedown',function(event){ });3.1 获取滑块位置
需要拖动滑块,肯定要先知道滑块原来的位置,才能根据鼠标的移动来拖拽滑块。在滑块上绑定的事件函数上有传入一个event对象,这个event对象代表当前事件的实例对象,包含当前事件相关信息。如下所示:
3.2 滑块跟随鼠标移动,修改滑动痕迹和文本数值
操作时,在滑块上按下鼠标,再移动鼠标就可以使滑块跟随鼠标移动。但一般移动鼠标不可能只在滑动条上面移动,所以需要在页面上绑定鼠标移动事件,如下所示:
3.3 释放鼠标时,固定滑块位置
当释放鼠标的时候,滑块固定在当前移动到的位置,滑动痕迹和文本数值已经一起修改。
鼠标按下事件函数就完成了。滑动条的样式都可以通过css实现,但默认文本数值是空的,这不太合理,所以需要加多一句代码,给文本元素默认赋值为0,如下所示:
//修改默认数值 eBarText.innerHTML = 0;4. 在滑动条上添加点击事件
当点击滑动条上除滑块之外的位置时,滑块应该直接滑动到鼠标点击的位置。需要在滑动条上添加点击事件实现此功能,代码如下:
到此这篇关于原生js拖拽功能制作滑动条实例教程的文章就介绍到这了,更多相关js拖拽功能制作滑动条内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了js实现滑动进度条效果的具体代码,供大家参考,具体内容如下进度条:js滑动进度条效果*{margin:0;padding:0;user-se
本文实例为大家分享了js鼠标拖拽div左右滑动的具体代码,供大家参考,具体内容如下Titlebody{position:relative;margin:0;pa
本文实例为大家分享了JS实现拖拽功能的具体代码,供大家参考,具体内容如下拖拽的原理:三个事件onmousedown、onmousemove、onmousemov
本文实例为大家分享了js面向对象方式实现拖拽的具体代码,供大家参考,具体内容如下拖拽功能的实现原理:(直接拿走!)Document#box{position:a
本文实例为大家分享了js实现拖拽移动与缩放效果的具体代码,供大家参考,具体内容如下效果图如下-实现了简单的拖拽和缩放功能第一步—简单的拖拽功能//创建一个Mov