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

前端  /  管理员 发布于 4年前   637

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

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

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

上代码：

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

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

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

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

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

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

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

              
用鼠标拖动小方块0%
    
    
      
0        
  
    
      
0        

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

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

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

您可能感兴趣的文章:

• js实现可拖动DIV的方法
• html+javascript实现可拖动可提交的弹出层对话框效果
• javascript之可拖动的iframe效果代码
• js 可拖动列表实现代码
• JS+CSS实现可拖动的弹出提示框
• 原生JS可拖动弹窗效果实例代码
• javascript实现dom元素可拖动
• javascript 进度条的几种方法
• JavaScript实现网页加载进度条代码超简单
• JS 进度条效果实现代码整理
• JS实现环形进度条（从0到100%）效果
• JavaScript实现水平进度条拖拽效果