最近做项目，有一个滑动音乐播放进度条的效果，但是使用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. Verilog 加法器和减法器(8)-串行加法器

    如果对速度要求不高,我们也可以使用串行加法器.下面通过状态机来实现串行加法器的功能. 设A=an-1an-2-a0, B=bn-1bn-2-b0,是要相加的两个无符号数,相加的和为:sum=sn-1s ...

  2. hdu 1828 Picture（线段树扫描线矩形周长并）

    线段树扫描线矩形周长并 #include <iostream> #include <cstdio> #include <algorithm> #include &l ...

  3. Android 自定义TextView 实现文本间距

    Android系统中TextView默认显示中文时会比较紧凑,不是很美观.为了让每行保持一定的行间距,可以设置属性android:lineSpacingExtra或android:lineSpacin ...

  4. bug Spring Mvc中Jsp页面获取不到Controller中的变量

    今天遇到了一个奇怪的问题: jsp代码如下: <h1>数据对比${name}</h1> 在controller里面,有赋值: @RequestMapping(value = & ...

  5. C++中 线程函数为静态函数 及 类成员函数作为回调函数

    线程函数为静态函数: 线程控制函数和是不是静态函数没关系,静态函数是在构造中分配的地址空间,只有在析构时才释放也就是全局的东西,不管线程是否运行,静态函数的地址是不变的,并不在线程堆栈中static只 ...

  6. CSS中的继承

    继承:子元素继承父元素的样式,但是并不是所有属性都是默认继承的. 通过文档中的 inherited:yes 来判断属性是否可以继承,关于继承可以参见css的继承关键字: 一.无继承性的属性 1.dis ...

  7. 腾讯云SpringBoot部署 + HTTPS配置

    springboot可以打包为jar和war,jar不多说了,最近的一个工程需要打包为war发布,大致说一下吧: 先看一下项目的大致结构: 第一步,需要排除springboot自带的tomcat插件 ...

  8. Atitit  技术经理职责与流程表总结

    Atitit  技术经理职责与流程表总结 1. (最重要) 理念 价值观建设  ***团队文化建设2 1.1. 加强跨项目组员沟通 ,防止重复劳动2 1.2. 活动聚餐2 2. (重要)方向建设 技术 ...

  9. C#根据字符串名称 得到对应的方法

    public string GetMethod(string methodName, BookingRequest bookingId) { EmailTemplate p1 = new EmailT ...

  10. Socket网络编程--聊天程序(7)

    接上一小节,本来是计划这一节用来讲数据库的增删改查,但是在实现的过程中,出现了一点小问题,也不是技术的问题,就是在字符界面上比较不好操作.比如要注册一个帐号,就需要弄个字符界面提示,然后输入数字表示选 ...