原生js移动端可拖动进度条插件
该插件最初的想法来自网上的一篇文章，直达链接：https://www.cnblogs.com/libin-1/p/6220056.html
笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。
上代码：
<script>
function dragSlide(id) {
this.minDiv =document.getElementById(id); //小方块 this.width = parseInt(window.getComputedStyle(this.minDiv, null).width); //小方块的宽度 this.lineDiv = this.minDiv.parentNode; //长线条 //滑动的数值呈现
this.vals = this.minDiv.children[]; var that=this;
var move = function(e) {
var x = e.touches[].pageX;
var lineDiv_left = that.getPosition(that.lineDiv).left; //长线条的横坐标
var minDiv_left = x - lineDiv_left; //小方块相对于父元素（长线条）的left值
if (minDiv_left >= that.lineDiv.offsetWidth - that.width) {
minDiv_left = that.lineDiv.offsetWidth - that.width;
}
if (minDiv_left < ) {
minDiv_left = ;
}
//设置拖动后小方块的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * ;
if (percent > && percent < 0.5) {
percent = Math.ceil(percent);
} else {
percent = Math.floor(percent);
}
that.vals.innerText = percent;
}
//获取元素的绝对位置,工具函数
this.getPosition = function(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var 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);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//取消移动端手势长按弹出提示框的操作
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
}); </script>
html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下
1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点
2）只是将其改造为适用于移动端的插件
3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验
4）移动端加了防止长按弹出提示框的代码
5）小滑块的宽度改为动态
改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。
<!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">
.lineDiv {
position: relative;
height: 5px;
background: red;
width: 300px;
margin: 50px auto;
} .lineDiv .minDiv {
position: absolute;
top: -.5px;
left: ;
width: 30px;
height: 30px;
background: green;
cursor: pointer
} .lineDiv .minDiv .vals {
position: absolute;
font-size: 20px;
top: -45px;
left: -.5px;
width: 35px;
height: 35px;
line-height: 35px;
text-align: center;
background: blue;
} .lineDiv .minDiv .vals:after {
content: "";
width: 0px;
height: 0px;
border-top: 6px solid blue;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 6px solid transparent;
display: block;
margin-left: 11px;
} * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
</style>
</head> <body>
<center>
<h3>用鼠标拖动小方块<span id="msg"></span>%</h3>
</center>
<div id="lineDiv" class="lineDiv">
<div id="minDiv" class="minDiv">
<div id="vals" class="vals"></div>
</div>
</div>
<div style="height: 20px;"></div>
<div id="lineDiv" class="lineDiv">
<div id="minDiv1" class="minDiv">
<div id="vals" class="vals"></div>
</div>
</div>
<script>
//避免默认事件 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.vals = this.minDiv.children[]; var that = this;
var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bug
var move = function(e) {
var x = e.touches[].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 - that.width) {
minDiv_left = that.lineDiv.offsetWidth - that.width;
}
if (minDiv_left < ) {
minDiv_left = ;
}
//设置拖动后小方块的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * ;
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.vals.innerText = percent;
}
//获取元素的绝对位置,工具函数
this.getPosition = function(node) {
var left = node.offsetLeft; //获取元素相对于其父元素的left值var left
var 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);
}
var drag0 = new dragSlide("minDiv");
var drag1 = new dragSlide("minDiv1");
//取消移动端手势长按弹出提示框的操作
document.addEventListener('contextmenu', function(e) {
e.preventDefault();
});
</script>
</body> </html>
本文结束，2018年6月19日，修改bug
本文结束，2018年7月10日，优化
原生js移动端可拖动进度条插件的更多相关文章
- 纯原生js移动端图片压缩上传插件
前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...
- pace.js – 网页自动加载进度条插件
网站顶部的页面加载进度条是怎么实现的,页面的加载进度百分比,有时候获取是比较麻烦的,当然也可以利用一些优秀的JavaScript插件来实现,今天就为大家介绍这样子的一款插件:pace.js. [官方网 ...
- JS原生上传大文件显示进度条-php上传文件
JS原生上传大文件显示进度条-php上传文件 在php.ini修改需要的大小: upload_max_filesize = 8M post_max_size = 10M memory_li ...
- YprogressBar,html5进度条样式,js进度条插件
简介 YprogressBar是一款基于HTML5的进度条插件. YprogressBar是一款轻量级进度条插件,使用方便,资源占用少,模仿好压的解压界面,带有数字显示,同时支持在描述中增加参数,以动 ...
- 原生js移动端列表无缝间歇向上滚动
在项目开发中尤其是在项目的活动页面的开发中,经常需要将用户的购买信息或中奖信息等以列表的形式展示在页面当中,并可以使其自动间歇向上滚动来达到在有限的区域内展示所有信息的目的.通常的做法是通过将列表父元 ...
- [Android] SeekBar---可拖动进度条
SeekBar---可拖动进度条 ()setMax //设置SeekBar最大数值 ()setProgress //设置SeekBar当前数值 ()setSecondaryProgress//设置Se ...
- Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）
效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...
- UISlider无法拖动进度条的问题解决
UISlider无法拖动进度条的问题解决 最近业务中的视频播放使用到了UISlider,但是有一个奇怪的问题,就是在Modar出来的控制器中UISlider是可以正常使用的,但是在Push出来的控制器 ...
- 简单的jquery进度条插件LineProgressbar.js，myProgress.js
参考 http://www.lanrenzhijia.com/jquery/4121.html demo下载 <script src="js/jquery.lineProgress ...
随机推荐
- ACM1000：A + B Problem
Problem Description Calculate A + B. Input Each line will contain two integers A and B. Process to ...
- linux线程篇 (二) 线程的基本操作
线程 进程 标识符 pthread_t pid_t 获取ID pthread_self() getpid() 创建 pthread_create() fork 销毁 pthread_exit() ...
- Java8 Comparator 排序方法
Java8 中 Comparator 接口提供了一些静态方法,可以方便于我们进行排序操作,下面通过例子讲解下如何使用 对整数列表排序(升序) List<Integer> list = Ar ...
- web项目优化
1 循环时没有使用break 案例:查找一个值是否在数组中存在(为举例舍弃自带函数) $aa=123; $arr=array(234,123,5,6,45646,346,23); foreach($ ...
- 使用ListView+ObjectDataSource+DataPager实现增删改查加分页
一.配置objectDataSource 选择业务逻辑层的类 二.配置Select对应的方法,必须是一个带两个整型参数的方法,第一个参数表示要查看的第一条记录的前一条30,第二个参数每页最多能显示的记 ...
- 使用postman实现半自动化
前些日子项目要上一个活动,其中有一个功能是幸运大转盘,用户可以随机抽奖,奖品有多种满减券及多种商品,但是奖品都是有抽中概率的,且有的商品还设置有库存,所以测试点便是测试抽奖的概率和库存.接下来拆分一下 ...
- unity发布自定义分辨率
如果你需要发布unity时想要使用自己设置的分辨率仅需要一下几个步骤: 打开Build Setting->PlayerSetting->Resolution and Presentatio ...
- 看图写树 （Undraw the Trees UVA - 10562）
题目描述: 原题:https://vjudge.net/problem/UVA-10562 题目思路: 递归找结点 //自己的代码测试过了,一直WA,贴上紫书的代码 AC代码 #include< ...
- 对Java对象的认识与理解
今天是我学习编程以来第一次写博客,记下平日学习所得,本来这几日都在学习web框架 但觉得梳理一下之前所学很有必要.毕竟之前学习Java感觉很粗略只是以考试为目的.所以就以<Thinking in ...
- POJ - 3259
要判断是否有负的权值 #include<iostream> #include<stdio.h> #include<algorithm> #include<st ...