最近做项目，有一个滑动音乐播放进度条的效果，但是使用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. nssm和AlwaysUp来包装exe文件为windows服务

    最近遇到要把windows exe文件部署为service,因为原先开发为exe程序,现在有不想修改code改为service,但是部署必须是service服务, 所以我们需要一个包装器来包装exe为 ...

  2. TF_Server gRPC failed, call return code:8:Received message larger than max (45129801 vs. 4194304)

    tensorflow_serving 遇到错误:gRPC failed, call return code:8:Received message larger than max (45129801 v ...

  3. iOS 7设计备忘单

    With the release of iOS 7, app designers and developers will need to adjust their visual language to ...

  4. 【Android】详解Android Service

    目录结构: contents structure [+] Service简单概述 Service在清单文件中的声明 Service启动服务 Service绑定服务 扩展Binder类 使用Messen ...

  5. Xcode 常用设置

    1.main 文件注释 1)main 文件注释修改路径 /Applications/Xcode.app/Contents/Developer/Library/Xcode/Templates/Proje ...

  6. JS前台效果

    最新的在上面 2014年3月3日14:46:46 百分比思路 function fixWidth(percent) { return document.body.clientWidth * perce ...

  7. logstash retrying failed action with response code: 429

    https://blog.csdn.net/alan_liuyue/article/details/78926015 https://blog.csdn.net/ypc123ypc/article/d ...

  8. 3D打印技术之切片引擎（5）

    [此系列文章基于熔融沉积( fused depostion modeling, FDM )成形工艺] 从这一篇文章開始,就開始说填充.在3D打印切片技术中,填充算法是最核心的部分.3D打印技术的经常使 ...

  9. Atitit 数据库 标准库  sdk 函数库 编程语言 mysql oracle  attilax总结

    Atitit 数据库 标准库  sdk 函数库 编程语言 mysql oracle  attilax总结 1.1. 常见的编程语言以及数据库 sql内部函数库标准化库一般有以下api1 1.2. 各个 ...

  10. python文件的基础操作

    import os print(,'-')) print(os.getcwd()) print(,'-')) print(os.listdir()) print(,'-')) print(os.lis ...