原生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 ...
随机推荐
- HDFS原理
1 ． NameNode 概述 a. NameNode 是 HDFS 的核心. b. NameNode 也称为 Master. c. NameNode 仅存储 HDFS 的元数据:文件系统中所有文件的 ...
- Python中常见的字典dict处理
#字典的赋值d = [{"dasda": 123, "gsgsg": 3344}, {"dasdz": 123, "gsksg&q ...
- java 异常与捕获
几乎所有的代码里面都会出现异常,为了保证程序在出现异常之后可以正常执行完毕,就需要进行异常处理. 先来看一下异常的继承类结构: 所有的异常都是由Throwable继承而来,我们来看他下面的两个子类Er ...
- MongoDB入门---文档查询操作之条件查询&and查询&or查询
经过前几天的学习之路,今天终于到了重头戏了.那就是文档查询操作.话不多说哈,直接看下语法: db.collection.find(query, projection) query :可选,使用查询操作 ...
- HDL代码风格建议（2）乘法器和DSP推断
Inferring Multipliers and DSP Functions Inferring Multipliers module unsigned_mult (out, a, b); :] o ...
- Eclipse安装Java Class反编译插件
第一步:没有安装之前 第二步:从Eclipse Marketplace里,安装反编译插件jadclipse. 第三步:安装反编译插件之后,多了一个查看器,把"类反编译查看器"设置为 ...
- POM中常用依赖包
<?xml version="1.0" encoding="UTF-8"?><project xmlns="http://maven ...
- golang 仿python pack/unpack
写得不完善也不完美 尤其是高低位转换那(go和c 二进制高地位相反 需要转换,还有go int转[]byte长度是4位),希望牛人看后指导一下 项目需要通过socket调取 客户端是go ,服务器端是 ...
- PS 给天空添加蓝天白云<转载>
https://jingyan.baidu.com/article/b2c186c8e83b1cc46ef6ffee.html 给图片添加蓝天白云的步骤: 1.打开要加蓝天白云的照片.(如图一) ［图 ...
- 05-JVM对象探秘
一.对象的内存布局 以Hotspot虚拟机为例,对象在内存中的结构可以分为三部分:对象头(header).实例数据(instance data).对齐填充(padding). 1.1. ...