H5 可拖动、可点击进度条滑块

先看图

代码，根据自己的需求打包

<!DOCTYPE html>
<html lang="zh-cn">
<head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no" /><title>小滑块</title><style type="text/css">.slider-wrapper {position: relative;margin: 50px auto;padding: 5px 30px;font-size: 12px;height: 20px;box-sizing: border-box;}.slider-wrapper .label-left{position: absolute;left: 0;top: 0;line-height: 20px;}.slider-wrapper .label-right{position: absolute;right: 0;top: 0;line-height: 20px;}.slider-wrapper .slider-bar {position: absolute;top: -5px;left: -5px;width: 20px;height: 20px;background: green;cursor: pointer;border-radius: 100%;}* {-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;}.slider-content{height: 10px;background: #ededed;position: relative;}.slider-content p{margin: 0;height: 100%;background: red;width: 0;}</style>
</head>
<body><div class="slider-wrapper"><label class="label-left">数学</label><div class="slider-content" onclick="slideBar(this,event)"><p></p><div id="slider-node-1" class="slider-bar"></div></div><label class="label-right">0</label></div><script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script><script>var sliderBenchmark = 5;//定义最大得分function slideBar(el,e){//获取单击坐标let clickX  = e.clientX;//获取当前元素的左边距let domX    = $(el).offset().left;//获取dom宽度let domW    = $(el).width();//计算比例var margin  = Math.round(Math.min(domW,Math.max(0,clickX-domX)));let rate    = Math.max(0,margin/domW);let score   = Math.round(sliderBenchmark*rate);//当前分数if(score === sliderBenchmark){rate    = 1;margin  = domW;}$(el).children("p").css("width",margin+'px');$(el).children("div").css("left",(margin - 10)+'px');$(el).next().text(score);}//避免默认事件 2018.7.10 更新 优化uc浏览器左右滑动时候页面被拖动document.addEventListener('touchmove', function(e) {e.preventDefault();}, { passive: false });function dragSlide(id) {this.minDiv     = document.getElementById(id); //小方块 this.width      = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度this.lineDiv    = this.minDiv.parentNode; //长线条//滑动的数值呈现this.scoreDom   = $("#"+id).parent().next()[0];this.speed      = $("#"+id).prev()[0];//滑动进度var that = this;var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bugvar move = function(e) {var x = e.touches[0].pageX,direction = '';if (lastX == null) {lastX = x;return;}if (x > lastX) {direction = 'right';} else if (x < lastX) {direction = 'left';} else {direction = '';}var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值if (minDiv_left >= that.lineDiv.offsetWidth) {minDiv_left = that.lineDiv.offsetWidth;}if (minDiv_left < 0) {minDiv_left = 0;}//设置拖动后小方块的left值that.minDiv.style.left    = (minDiv_left - 10) + "px";that.speed.style.width    = minDiv_left + "px"//percent百分比改为如下所示,解决开始和最后滑动的体验不好问题var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * sliderBenchmark;if (percent < 0.5 && direction == 'right') {percent = Math.ceil(percent);} else if (percent > 0.5 && direction == 'right') {percent = Math.floor(percent);} else {percent = Math.ceil(percent);}that.scoreDom.innerText = percent;};//获取元素的绝对位置,工具函数this.getPosition = function(node) {var left  = node.offsetLeft; //获取元素相对于其父元素的left值var leftvar top   = node.offsetTop;current   = node.offsetParent; // 取得元素的offsetParent// 一直循环直到根元素while (current != null) {left += current.offsetLeft;　　top += current.offsetTop;　　current = current.offsetParent;　　}return {"left": left,"top": top};}this.minDiv.addEventListener("touchmove", move);}//取消移动端手势长按弹出提示框的操作document.addEventListener('contextmenu', function(e) {e.preventDefault();});new dragSlide("slider-node-1");</script>
</body>
</html>

H5 可拖动、可点击进度条滑块相关推荐

Android可触摸圆形进度条,Android 可滚动圆形进度条滑块和进度在进度条上面跟着滚动...
Android 可滚动圆形进度条滑块和进度在进度条上面跟着滚动.package com.example.test; import android.content.Context; import an ...
HTML+JavaScript拖拽进度条和点击进度条(显示进度条百分比)
实现进度条拖拽功能和点击功能,并显示占比实现图: 附加改变区域位置,不影响进度条完整代码 <!DOCTYPE html> <html lang="zh_CN" ...
html5给文字添加拼音,h5 给汉字加拼音加进度条
小编项目上最近设计有个新需求,要给汉纸加拼音,类似于加英文底部小标题类似,毕竟现在咱们中文之博大,大家都在学习和使用中文.下面就让我们学习一下吧,h5现在已经很强大足以应付很多需求. 一.给汉字加拼音 ...
h5学习笔记：vuejs 编写进度条
最近要练习一下vuejs,vuejs可以编写一些组件.在之前一直没有尝试,今天尝试以下vuejs组件式的开发也是非常不错.下面记录一下进度条. 使用Vue 编写一个全局组件.参考官方的以下的文档 ht ...
H5页面标题栏部分加载进度条0%-100%
网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程. 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以 ...
h5 Canvas实现圆形时间倒计时进度条
在项目中,我们会遇到需要显示进度条或者倒计时的功能,我们今天就来实现一下. 一.效果展示实现效果要求: 1.环形倒计时 2.能够根据总时间和当前时间进行比例性的倒计时 3.进度条环形能够有颜色渐变效 ...
vue点击拖动进度条
需要实现拖拽和点击进度条的功能,但是很多插件都只实现拖拽事件,基于以上两个原因,自己封装了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置) ...
【OpenCV+Qt】实现简易视频播放器——支持进度条拖动
OpenCV实现视频播放器,其思路大致就是在线程中使用OpenCV中的VideoCapture循环读取本地视频的每一帧Mat,然后发送到界面转换成QImage进行显示,而进度条拖动则用到了VideoC ...
Vue3+TypeScript实现网易云音乐WebApp（播放界面：播放、暂停、音量控制、播放进度控制(点击/拖拽进度条)、上一首、下一首）
1. 成果展示真实接口地址本项目使用的是真实线上的网易云API 线上演示地址目前只做了每日推荐(需登录)以及排行榜功能,点个star吧大佬们! 项目GitHub地址 main分支是Vue3+Ty ...

H5 可拖动、可点击进度条滑块

H5 可拖动、可点击进度条滑块相关推荐

最新文章

热门文章