原生js实现的移动端可拖动进度条插件功能详解
本文实例讲述了原生js实现的移动端可拖动进度条插件功能。分享给大家供大家参考，具体如下：
该插件最初的想法来自网上的一篇文章，直达链接：//www.jb51.net/article/167717.htm
笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。
上代码：
<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[0];
var that=this;
var move = function(e) {
var x = e.touches[0].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 <0 ) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
if (percent > 0 && 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: -12.5px;
left: 0;
width: 30px;
height: 30px;
background: green;
cursor: pointer
}
.lineDiv .minDiv .vals {
position: absolute;
font-size: 20px;
top: -45px;
left: -2.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">0</span>%</h3>
</center>
<div id="lineDiv" class="lineDiv">
<div id="minDiv" class="minDiv">
<div id="vals" class="vals">0</div>
</div>
</div>
<div style="height: 20px;"></div>
<div id="lineDiv" class="lineDiv">
<div id="minDiv1" class="minDiv">
<div id="vals" class="vals">0</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[0];
var that = this;
var lastX = null; //判断鼠标移动方向，解决向左侧滑动时候的bug
var 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 - that.width) {
minDiv_left = that.lineDiv.offsetWidth - that.width;
}
if (minDiv_left < 0) {
minDiv_left = 0;
}
//设置拖动后小方块的left值
that.minDiv.style.left = minDiv_left + "px";
//percent百分比改为如下所示,解决开始和最后滑动的体验不好问题
var percent = (minDiv_left / (that.lineDiv.offsetWidth - that.width)) * 100;
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>
感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。
更多关于JavaScript相关内容可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》
希望本文所述对大家JavaScript程序设计有所帮助。
相关推荐
-
js 可拖动列表实现代码
补充一点: 要禁止移动中选中文字,FF可以设置CSS xxxx{-moz-user-select:none;} 其他的浏览器可以设置 XXXX.onselectstart = function(){return false} 一种实现原理就是点击没目标元素之后,创建一个占位元素(或者复制一份目标元素,即拷贝B),然后拖动目标元素(或者复制的来的新元素B): 找到相应的位置之后,插入目标元素.清除占位元素或者B. 比如有一个列表: 复制代码 代码如下: <!DOCTYPE html PUBLIC
-
JS实现环形进度条（从0到100%）效果
最近公司项目中要用到这种类似环形进度条的效果,初始就从0开始动画到100%结束.动画结果始终会停留在100%上,并不会到因为数据的关系停留在一半. 如图 代码如下 demo.html <!doctype html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content=
-
JavaScript实现网页加载进度条代码超简单
网页进度条能够更好的反应当前网页的加载进度情况,loading进度条可用动画的形式从开始0%到100%完成网页加载这一过程.但是目前的浏览器并没有提供页面加载进度方面的接口,也就是说页面还无法准确返回页面实际加载的进度,本文中我们使用jQuery来实现页面加载进度条效果. HTML 首先我们要知道的是,目前没有任何浏览器可以直接获取正在加载对象的大小.所以我们无法通过数据大小来实现0-100%的加载显示过程. 因此我们需要通过html代码逐行加载的特性,在整页代码的若干个跳跃行数中设置节点,进行
-
JavaScript实现水平进度条拖拽效果
本文实例为大家分享水平进度条拖拽效果的js具体代码,供大家参考,具体内容如下 <html> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{ margin: 0; padding: 0; } .scroll{ margin:100px; width: 500px; height: 5px; background: #ccc; posit
-
html+javascript实现可拖动可提交的弹出层对话框效果
复制代码 代码如下: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JAVASCRI
-
javascript实现dom元素可拖动
摘要: 最近在项目中要做一个图片预览的功能,这时候会遇到用户上传很大的图片,已经超出视图界面.最终决定做一个在固定宽和高的位置,用户可以拖动图片查看.所以自己就写了一个支持ie5+,chrome,Firefox,opera等浏览器的可拖动dom元素的插件. 实现这个功能所需要的知识点不多,如下: 1.js中element.style.left style.left返回的变量是个字符串,是个可改变量 js中element.offsetLeft offsetLeft返回的是个int类型,不可改变量(
-
JS+CSS实现可拖动的弹出提示框
本文实例讲述了JS+CSS实现可拖动的弹出提示框.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&
-
原生JS可拖动弹窗效果实例代码
这个代码不是我原创的,只是最近想学自己做一个很漂亮的弹窗,自己本来是不会怎么写的,所以上网去找了下,感觉这个不错,很简单,很实用,入门很棒.我就改了下,使逻辑性和可读性更好. 原作者已不可考.感谢原作者,阿门. 复制代码 代码如下: <html> <head> <meta http-equiv="Content-Type"content="text/html; charset=gb2312"/>
-
JS 进度条效果实现代码整理
第一种方法:Loading.js 复制代码 代码如下: //频率 var frequency = 50; //步长 var step = 3; //背景颜色 var loadingBgcolor = "#ffffff"; //宽度 var loadingWidth = 354; /* *参数说明: *content:显示内容,可以为空: *imageURL:将引用JS文件的路径设置即可: *left:进度条显示位置left *top:进度条显示位置top */ function Loa
-
javascript之可拖动的iframe效果代码
// HISTORY// ------------------------------------------------------------------// Jan 23, 2004: Fixed problems which caused the script not to work in// some framed situations. Improved browser support.// Added easier "addH
-
javascript 进度条的几种方法
我们先看看最终效果: 第一步,基本 构建基本的代码,看效果演示: 制作进度条的两种方法 *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /*进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:
-
js实现可拖动DIV的方法
随着时代的变化,越来越感觉到js的重要性,js不仅可以做web页面(如Ext框架),还可以做一些web的特效,这些特效不仅兼容PC,而且兼容手机端,毕竟是基于浏览器的,和平台没关系.现在微软的windows8 系统的App都可以用js开发了,大家有时间可以去尝试一下. 现在切入正题,说一下js 实现可拖动Div.实现这个功能我们先说一下思路: 1.捕捉鼠标div的mousedown事件 2.捕捉 document的 mousemove事件 3.取消事件 然后我们看一下代码: 复制代码 代码如