原生JS实现拖拽垂直进度条

先看效果图

代码如下

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>原生JS实现拖拽垂直进度条</title><style>.luminancedrag {position: absolute;top: 170px;right: 1200px;width: 10px;height: 200px;background-color: #2979fe;border-radius: 12px;}.luminancedrag .dot {display: flex;position: absolute;bottom: 0;right: 0;width: 12px;height: 10px;background-color: #000;border-radius: 50%;}.luminancedrag .data {position: absolute;top: -30px;right: 0;}.luminancedrag .already {background-color: pink;height: 100%;border-radius: 12px;}</style></head><body><div class="luminancedrag" id="bar" :style=""><div id="proceed" class="already"></div><div class="dot" id="proDot"></div><div class="data" id="data">0</div></div><script>window.onload = function () {var bar = document.getElementById('bar');var proDot = document.getElementById('proDot');var disY = ''// var proceed = document.getElementById('proceed');//鼠标按下事件proDot.onmousedown = function (ev) {var myEvent = ev || event;// 计算鼠标相对滑块上的位置if (!disY) {disY = myEvent.clientY;//鼠标距离窗口位置}//鼠标移动事件document.onmousemove = function (ev) {var myEvent = ev || event;console.log('myEvent', myEvent);console.log(ev, event);// 计算滑块的动态bottom值var l = disY - myEvent.clientY;// 限制拖拽范围if (l < 0) {l = 0;} else if (l > bar.offsetHeight - proDot.offsetHeight) {l = bar.offsetHeight - proDot.offsetHeight;};proDot.style.bottom = l + 'px';let proceedHeight = bar.offsetHeight - l$("#proceed").css("height", proceedHeight + "px");var petcent = Math.floor((1 - proceedHeight / bar.offsetHeight) * 100)      //95等分var dataValue = Math.floor(petcent * (65535 / 95))          //65535分95等分再乘百分比得出总数$('#data').text(dataValue)console.log(dataValue);// 计算拖拽移动距离与可拖动总范围的比例var scale = l / (bar.offsetHeight - proDot.offsetHeight);};//鼠标弹起事件document.onmouseup = function () {document.onmousemove = null;// document.onmouseup = null;console.log(document.onmousemove);};};};</script></body>
<script src="./common/js/jquery.js"></script></html>

原生JS实现拖拽垂直进度条相关推荐

原生JS实现拖拽进度条、滚动鼠标显示相应的内容
今天要分享的是运用原生JS实现拖拽进度条.滚动鼠标显示相应的内容,实现效果如下: 以下是代码实现,欢迎大家复制粘贴. <!DOCTYPE html> <html><hea ...
java圆形进度条_可拖拽圆形进度条组件（支持移动端）
好久之前写过一个可拖拽圆形进度条的dome,中间有网友反馈过一些问题,最近比较闲有时间修改了一些问题也做了一些优化,并封装成组件,基于canvas实现,只需传入放置组件dom容器,任何框架均可直接使用 ...
html5 原生拖拽,原生JS实现拖拽效果
这篇文章主要为大家详细介绍了原生JS实现拖拽效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了JS实现拖拽效果的具体代码,供大家参考,具体内容如下 ...
原生js实现拖拽上传文件
原生js实现拖拽上传文件 <!DOCTYPE html> <html lang="en"><head><meta charset=&quo ...
原生JS实现拖拽翻书特效
给大家分享一个用原生JS实现的拖拽翻书效果图,效果如下: 效果还不错吧,当然还需要两个图片. 1.书本封面. 2.书页实现代码如下,欢迎大家复制粘贴. <!DOCTYPE html> & ...
javascript，H5,jQuery，css“实现音乐歌词解析，歌词同步滚动，进度条拖拽、进度条同步，音量控制，歌词同步高亮的功能齐全的简易音乐播放器
用js和HTML实现一个带歌词同步,以及进度条拖拽,音量控制的简单音乐播放器. 这个音乐播放器,可以实现歌词的滚动,进度条拖拽,音乐播放进度,音量控制等功能.,资源全为网上资源,直接复制代码,便能看到 ...
原生js实现拖拽与缩放等包含js设置样式与五子棋等
最近写五子棋,写着写着,写了几个js特效,感觉还行,发出来分享一下.具体还在调试,如果有alert弹窗部分,大家自己找一下取消掉.我记得缩放的四个边角红色背景色没有去掉,嫌碍事的可以把"ba ...
原生js实现拖拽功能
一.写在前面如果我们想要实现拖拽的功能,必须要知道三个事件: 1.onmousedown:鼠标按下事件 2.onmousemove:鼠标移动事件 3.onmouseup:鼠标抬起事件二.实现思路 ...
原生JS的拖拽属性draggable（详解）
摘要作为h5新增的属性draggable,它能够给与一切的html元素拖动的效果.而在这个属性之下,也有着关于拖动效果的各个方法. 而这一篇文章,主要就是说一下关于draggable属性的使用以及工 ...

原生JS实现拖拽垂直进度条

原生JS实现拖拽垂直进度条相关推荐

最新文章

热门文章