最近做项目，有一个滑动音乐播放进度条的效果，但是使用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. 图解 HTTP 协议

    原文出处: BYSocket (@BYSocket) 一.技术基石及概述 问:什么是HTTP?答:HTTP是一个客户端和服务器端请求和响应的标准TCP.其实建立在TCP之上的. 当我们打开百度网页时, ...

  2. 你真的会用Gson吗?Gson使用指南（2）

    注:此系列基于Gson 2.4. 上一篇文章 你真的会用Gson吗?Gson使用指南(1) 我们了解了Gson的基础用法,这次我们继续深入了解Gson的使用方法. 本次的主要内容: Gson的流式反序 ...

  3. 奇怪吸引子---Lorenz

    奇怪吸引子是混沌学的重要组成理论,用于演化过程的终极状态,具有如下特征:终极性.稳定性.吸引性.吸引子是一个数学概念,描写运动的收敛类型.它是指这样的一个集合,当时间趋于无穷大时,在任何一个有界集上出 ...

  4. iOS开发-获取设备型号信息

    开发中有的时候查看设计统计数据,或者通过日志查看错误信息,这个时候我们就需要获取获取设备信息,看下关于设备有几种方法: NSLog(@"%@",[[UIDevice current ...

  5. jQuery()方法的第二个参数

    关于jQuery()方法的第二个参数,有下面这几种用法: 1.jQuery(selector, [context]) 这种用法,相当于 $(context).find(selector) 或者 con ...

  6. SimpleCaptcha生成图片验证码内容为乱码

    转自:https://blog.csdn.net/wlwlwlwl015/article/details/51482065 前言 报表中发现有中文乱码和中文字体不整齐(重叠)的情况,首先考虑的就是操作 ...

  7. 【PMP】项目风险管理~重点知识

    1.什么是风险,项目的风险从哪里来? 开展项目,不仅要面对各种制约因素和假设条件,而且还要应对可能相互冲突和不断变化的相关方期望.组织应该有目的的以可控方式去冒项目风险,以便平衡风险和回报,并创造价值 ...

  8. c# 序列化BinaryFormatter、SoapFormatter和XmlSerializer的区别

    在C#中常见的序列化的方法主要也有三个:BinaryFormatter.SoapFormatter.XML序列化 1.BinaryFormatter 序列化 [Serializable] //如果要想 ...

  9. Python3 笔记

    Ubuntu18.04 Python3环境 默认python3已经安装了, 可能是安装其他应用的时候因为依赖关系安装的. 安装pip3, 先sudo apt update 一下, apt-cache ...

  10. phpBB3.2 自动检测浏览器语言

    这是根据HTTP request header里的Accept-Language信息来处理的. 首先看一下Accept-Language的格式 Accept-Language: <languag ...