原生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 ...
随机推荐
- exynos4412—UART裸板复习
我们通过RS232来做实验. 通过电平转换芯片, 连接至核心板: 即:GPA0_0 GPA0_1 配置引脚为串口专用模式: 然后看 ULCONn [31:0] 0x3 设置串口 ...
- python 查找元素 获取元素信息 元素交互操作 执行JavaScript
from selenium import webdriver browser = webdriver.Firefox() browser.get("https://tieba.baidu.c ...
- 创建IDataProvider实例
using System; namespace Demo.Data{ public class DatabaseProvider { private static IDataProvider _ins ...
- Tensorflow取消占用全部GPU
参考:https://www.cnblogs.com/jiu0821/p/9501665.html Tensorflow默认是会占用全部的GPU,而有时候你根本不需要那么占用那么多GPU资源,这时候就 ...
- Java——final代码块是否一定被执行---18.11.08
辨析:final语句块一定会被执行吗? 答案是 不一定!!! 至少有两种情况下finally语句是不会被执行的: (1)try语句没有被执行到,如在try语句之前return就返回了,这样final语 ...
- JavaSE打开windows文件
第一个参数表示用什么程序打开,第二个参数表示文件的路径 例一: //用记事本打开d:/test.txt文件 Process p = java.lang.Runtime.getRuntime().exe ...
- andriod 学习三 使用android资源
3.1 android框架中有许多资源,包括布局,字符串,位图,图片....,使用资源之前需要在相应的资源文件中定义资源,然后编译程序时ADT将定义的资源转换成java类并给予唯一的id,而代码中需要 ...
- OpenCV 3.0.0处理鱼眼镜头信息 - Fisheye camera model
此篇随笔主要参考OpenCV 3.0.0的官方文档翻译而来,主要用作理解OpenCV对鱼眼相机的标定.图像校正.3D重建功能的理解. 版权所有,转载请注明出处~ xzrch@2018.09.29 参考 ...
- jenkins--Jenkins+Git+coding+maven 实现自动化测试持续集成
1.打开Jenkins官网,下载jenkins.war https://jenkins.io/download/ 2.将该war包直接放置到Tomcat的webapp下. 3.查看自己Tomcat的端 ...
- DP动态规划练习
先来看一下经典的背包问题吧 http://www.cnblogs.com/Kalix/p/7617856.html 01背包问题 https://www.cnblogs.com/Kalix/p/76 ...