最近做项目，有一个滑动音乐播放进度条的效果，但是使用input的 range 来做会出现一些问题，想了想还是用JS来写。直接上代码：

<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

.progress{position: relative; width:300px;margin:100px auto;}

.progress_bg{height: 10px; border: 1px solid #ddd; border-radius: 5px; overflow: hidden;background-color:#f2f2f2;}

.progress_bar{background: #5FB878; width: 0; height: 10px; border-radius: 5px;}

.progress_btn{width: 20px; height: 20px; border-radius: 5px; position: absolute;background:#fff;

left: 0px; margin-left: -10px; top:-5px; cursor: pointer;border:1px #ddd solid;box-sizing:border-box;}

.progress_btn:hover{border-color:#F7B824;}

</style>

</head>

<body>

    <div class="progress">

        <div class="progress_bg">

            <div class="progress_bar"></div>

        </div>

        <div class="progress_btn"></div>

        <div class="text">0%</div>

    </div>

    <script type="text/javascript">

        var that =this;

        var width = document.querySelector('.progress').offsetWidth;

        var audio=document.querySelector('audio');

        /*audio.addEventListener("loadedmetadata", function() {*/

        // 拖拽事件

        var touch = document.querySelector('.progress_btn');

        touch.addEventListener("touchstart",handleStart,false); // 触摸开始

        touch.addEventListener("touchmove",handleMove,false); // 开始移动

        touch.addEventListener("touchend",handleEnd,false); // 触摸结束

        var x1,y1,oldTime,newTime,olfLeft,newLeft;

        function handleStart(e){

            e.preventDefault();

            var touches = e.changedTouches;

            x1 = touches[0].pageX;

            y1 = touches[0].pageY;

            olfLeft = document.querySelector('.progress_btn').offsetLeft;

            // document.getElementById("audio").pause();

            // that.pause=true;

        }

        function handleMove(e){

            e.preventDefault();

            var x2 = e.changedTouches[0].pageX;

            var y2 = e.changedTouches[0].pageY;

            newLeft = x2-x1;

            nowLeft = olfLeft+newLeft;

            if(nowLeft<0){

                nowLeft = 0;

            }

            if(nowLeft>width){

                nowLeft = width;

            }

            document.querySelector('.progress_bar').style.width=nowLeft+"px";

            document.querySelector('.progress_btn').style.left=(nowLeft-(nowLeft>(width-10)?10:5))+"px";

            var per = nowLeft/width;

            console.log(per);

            // that.nowAudioTime = 136 * per;//音频应该显示的时间

            // that.current_time=that.nowAudioTime;

            // audio.currentTime = that.nowAudioTime;

        }

        function handleEnd(e){

            touch.removeEventListener("touchmove",handleEnd,false);

            // document.querySelector('audio').currentTime = that.nowAudioTime;

            // console.log(document.querySelector('audio').currentTime);

            // document.querySelector('audio').play();

            // that.pause=false;

        }

    </script>

</body>

</html>

js---手机端滑动进度条的更多相关文章

  1. h5实现手机端等级进度条

    h5实现等级进度条 需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...

  2. bootstrap实现 手机端滑动效果，滑动到下一页，jgestures.js插件

    bootstrap能否实现 手机端滑动效果,滑动到下一页 jgestures.js插件可以解决,只需要引入一个JS文件<script src="js/jgestures.min.js& ...

  3. JGUI源码：Accordion鼠标中键滚动和手机端滑动实现(2)

    本文是抽屉组件在PC端滚动鼠标中键.手机端滑动时,滚动数据列表实现方法,没有使用iscroll等第三方插件,支持火狐,谷歌,IE8+等浏览器. 演示在:www.jgui.com Github地址:ht ...

  4. js---PC端滑动进度条

    这个是PC端的滑动进度条效果: <!doctype html> <html lang="en"> <head> <meta charset ...

  5. Axure教程：滑动进度条、圆形进度环的复杂交互效果实现方法

    滑动条.进度条.进度环,是产品原型中比较常见的进度展示功能.今天笔者分享的是使用Axure原型工具实现两种进度展示功能中相对复杂的交互效果. 效果一.可拖动.可显示进度值.可计算多个页面均值的滑动进度 ...

  6. JS框架_(JQbar.js)柱状图动态百分比进度条特效

    百度云盘 传送门 密码:q6rt 柱状图动态百分比进度条效果 <html> <head> <title>jqbar.js柱状图动态百分比进度条特效</titl ...

  7. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  8. JS -- 异步加载进度条

    今天在博客园问答里面看到博友问道怎么实现Ajax异步加载产生进度条. 很好奇就自己写了一个. 展现效果: 1) 当点击Load的时候,模拟执行异步加载. 浏览器被遮挡. 进度条出现. 实现思路: 1. ...

  9. js页面加载进度条(这个就比较正式了，改改时间就完事儿)

    不废话,直接上代码 思路不难,就是一个animate方法配合随机数 duration内个三秒钟,是自定义的,可以改成页面加载时间,这样就完美了 <!doctype html> <ht ...

随机推荐

  1. Java Web开发总结（一）

    1.如何解决 tomcat 中文乱码问题? 2.如果某个Servlet的映射路径仅仅为一个正斜杠(/),那么这个Servlet就成为当前Web应用程序的缺省Servlet. <!-- 将Serv ...

  2. 从Encoder到Decoder实现Seq2Seq模型

    https://zhuanlan.zhihu.com/p/27608348 更新:感谢@Gang He指出的代码错误.get_batches函数中第15行与第19行,代码已经重新修改,GitHub已更 ...

  3. Extjs的grid的单元格中加载超链接和按钮

    效果: 户型图列显示的图片实际上就是一个超链接. 添加一个Button分2个步骤:1.在列头中定义超链接列或者Button列的HTML代码,也就是Render 2.添加该Button的事件处理函数.其 ...

  4. Spring MVC实现上传文件报错解决方案

    报错代码: org.springframework.beans.BeanInstantiationException: Could not instantiate bean class [org.sp ...

  5. 绝对精品推荐做前端的看下：Web前端开发体会十日谈

    20151208感悟: 前端人的角度来看的话,感觉像是阅读一个大牛前端的全部武功的一个秘籍说明,里面的思想高价值蛋白真是太多太多,推荐看. Web前端开发体会十日谈 一直想写这篇“十日谈”,聊聊我对W ...

  6. 转 全面理解Javascript闭包和闭包的几种写法及用途

    转自:http://www.cnblogs.com/yunfeifei/p/4019504.html 好久没有写博客了,过了一个十一长假都变懒了,今天总算是恢复状态了.好了,进入正题,今天来说一说ja ...

  7. MySQL在线删除多余的binlog文件

    如果你的MySQL搭建了主从同步 , 或者数据库开启了log-bin日志(MySQL默认开启) , 那么随着时间的推移 , 你的数据库data 目录下会产生大量的日志文件 ll /opt/mysql/ ...

  8. 3D建模软件的选择（UG，Solidworks，ProE）

    转自:3D建模软件的选择(UG,Solidworks,ProE) 自述 咱是一个码农,和web.软件.控制台打交道太多了,很想玩玩炫的东西,于是学了点点PS,结果发现完全没有美术细胞TT.最近有碰到对 ...

  9. 【转载】ssh-keygen 基本用法

    [转载]ssh-keygen 基本用法 原文地址:https://www.liaohuqiu.net/cn/posts/ssh-keygen-abc/ ssh 公钥认证是ssh认证的方式之一.通过公钥 ...

  10. 【Linux高级驱动】linux设备驱动模型之平台设备驱动机制

    [1:引言: linux字符设备驱动的基本编程流程] 1.实现模块加载函数  a.申请主设备号    register_chrdev(major,name,file_operations);  b.创 ...