最近做项目，有一个滑动音乐播放进度条的效果，但是使用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. iOS:用Block写一个链式编程

    一.介绍 链式编程是一个比较新颖的编程方式,简单直观,用起来也比较舒服.目前比较有名的Mansory和BabyBlueTooth就是使用链式编程写的第三方框架. 二.写法 链式编程写法不同于传统方式, ...

  2. ESXi安装实录

  3. Jquery实现日期转换为 Unix时间戳及时间戳转换日期

    (function ($) { $.extend({ myTime: { /** * 当前时间戳 * @return <int> unix时间戳(秒) */ CurTime: functi ...

  4. Linux 内存机制【转载】

    原文地址:http://blog.csdn.net/tianlesoftware/article/details/5463790 一. 内存使用说明 Free 命令相对于top 提供了更简洁的查看系统 ...

  5. JAVA常用代码

    一. 判断是否包含某个注解.    1). 声明接口 @Retention(RetentionPolicy.RUNTIME) @Target(ElementType.TYPE) @Documented ...

  6. Nginx 状态信息功能配置

    Nginx 状态信息功能介绍 Nginx 有一个 ngx_http_stub_status_module 模块,主要功能是记录 Nginx 的基本访问状态信息,让使用者了解 Nginx 的工作状态 要 ...

  7. layui table 根据条件改变更换表格颜色 高亮显示 数据筛选

    请问想让当layui表格的某个字段符合某个条件的时候,让该行变颜色.这样可以实现么. layui数据表格怎么更换表格颜色 layui表格 通过判断某一行中的某一列的值进行设置这一行的颜色 LayUI之 ...

  8. struts2 + urlrewrite 整合注意事项

    这几天业余时间在玩百度云,百度的云还是不错的,但是对于我这样的.NET程序员,有点不公平,没有.net虚机,不过也不是百度一家没有,基本都没有,有的都是那种开放云,自已在云端来部署安装软件的. 所以也 ...

  9. MemoryFile偷取安卓内存

    参考链接:http://www.jcodecraeer.com/a/anzhuokaifa/androidkaifa/2016/0111/3859.html MemoryFile memoryFile ...

  10. 物联网架构成长之路(15)-Jenkins部署SpringBoot

    1.前言 现在慢慢也在负责一些工作了.这段时间有空,就多了解了解软件多人开发的一些知识.以前项目都是我一个人做的,从数据库设计到后端再到前端,全部放在一个war包丢到tomcat里面然后运行,利用to ...