微客导航 » 文章资讯 » 原生js实现的移动端可拖动进度条插件功能详解

原生js实现的移动端可拖动进度条插件功能详解

2023-08-17 15:07:06 170

本文实例讲述了原生js实现的移动端可拖动进度条插件功能。分享给大家供大家参考，具体如下：

该插件最初的想法来自网上的一篇文章，直达链接：//www.nhooo.com/article/167717.htm

笔者因为业务需要寻找到这个插件，然后拿来用之，发现各种不方便，然后便开始了改造之路。

上代码：

html和css部分没有改动，而js改动还是很大的，比较原来作者的文章，改动点如下

1）整体上，原来不是插件，改造之后成为一个可以复用的插件，虽然简单了点

2）只是将其改造为适用于移动端的插件

3）通过对开始滑动和结束滑动比例的处理，优化了开始滑动和结束滑动的体验

4）移动端加了防止长按弹出提示框的代码

5）小滑块的宽度改为动态

改造之后的整体案例，需要指出：笔者主要用在微信端，至于其他浏览器滑块的体验不是很好，还有滑块滑动体验跟小块的尺寸有直接关系。






鼠标拖动小方块

.lineDiv{
position:relative;
height:5px;
background:red;
width:300px;
margin:50pxauto;
}
.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:6pxsolidblue;
border-left:6pxsolidtransparent;
border-right:6pxsolidtransparent;
border-bottom:6pxsolidtransparent;
display:block;
margin-left:11px;
}
*{
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
user-select:none;
}




用鼠标拖动小方块0%



0

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试上述代码运行效果。

更多关于JavaScript相关内容可查看本站专题：《JavaScript页面元素操作技巧总结》、《JavaScript操作DOM技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

原生js实现的移动端可拖动进度条插件功能详解

用鼠标拖动小方块0%

热门推荐

随机推荐