JS实现音量控制拖动


Posted in Javascript onJanuary 15, 2020

本文实例为大家分享了JS实现音量控制拖动的具体代码,供大家参考,具体内容如下

描述:

JS——实现音量控制拖动

    1)、有底条,有拖拽按钮
    2)、设置最小和最大值
    3)、拖动定位后,抛出事件当前的所在值

效果:

JS实现音量控制拖动

实现:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #all {
      width: 500px;
      height: 86px;
      margin: 100px auto;
      position: relative;
    }
 
    #bar {
      width: 500px;
      height: 20px;
      border-radius: 10px;
      background: #9acfea;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      margin: auto;
      cursor: pointer;
    }
 
    #box {
      width: 30px;
      height: 30px;
      background: #ec971f;
      position: absolute;
      bottom: 0;
      top: 0;
      margin: auto 0;
      border-radius: 50%;
      cursor: pointer;
      transition: left 0.1s linear 0s;
    }
  </style>
</head>
<body>
  <div id="all">
    <p>当前位置0%</p>
    <div id="bar">
      <div id="box"></div>
    </div>
  </div>
<script>
 
  var all=document.getElementById("all");//容器
  var p=document.querySelector("p");//进度百分比
  var bar=document.getElementById("bar");//进度显示条
  var box=document.getElementById("box");//进度按钮
 
  var boxL,newL,moveL,mouseX,left;
  var cha = bar.offsetWidth - box.offsetWidth;
  var index=0;//标记状态
 
  var evt=new Event("change");//本身的事件
  init();
  function init() {
    box.addEventListener("mousedown",mouseDownclickHandler);
    document.addEventListener("mousemove",mouseMoveclickHandler)
    document.addEventListener("mouseup",mouseUpclickHandler);
    document.addEventListener("change",changeHandler);
    bar.addEventListener("click",clickHandler);
  }
 
  function mouseDownclickHandler(e) {
    index=1;
    boxL=box.offsetLeft;
    mouseX=e.clientX;//鼠标按下拖动的位置
  }
 
  function mouseMoveclickHandler(e) {
    if(index===1){
      moveL=e.clientX-mouseX;//鼠标移动
      newL=boxL+moveL;//left值
 
      //判断最小值与最大值
      if(newL<0){
        newL = 0;
      }
      if(newL>=cha){
        newL=cha;
      }
      // 改变left值
      box.style.left = newL + 'px';
      // 计算比例
      var bili = newL / cha * 100;
      p.textContent = '当前位置' + Math.ceil(bili) + '%';
      evt.elem=this;//当前指向 对象
      document.dispatchEvent(evt);//朝谁发送 抛发
    }
  }
 
  function mouseUpclickHandler(e) {
    index=0;
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
  }
 
  function clickHandler(e) {
    left = e.clientX-all.offsetLeft-box.offsetWidth/2;
    if(left<0){
      left=0;
    }
    if(left>=cha){
      left=cha;
    }
    box.style.left=left+'px';
    bili=left/cha*100;
    p.innerHTML='当前位置'+ Math.ceil(bili)+'%';
    evt.elem=this;//当前指向 对象
    document.dispatchEvent(evt);//朝谁发送 抛发
  }
 
  function changeHandler(e) {
    console.log(e);
  }
</script>
</body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript 面向对象封装与继承
Nov 27 Javascript
浅谈Javascript Base64 加密解密
Dec 28 Javascript
javascript实现C语言经典程序题
Nov 29 Javascript
vue-router路由参数刷新消失的问题解决方法
Jun 17 Javascript
微信小程序 空白页重定向解决办法
Jun 27 Javascript
Angular 4中如何显示内容的CSS样式示例代码
Nov 06 Javascript
浅谈webpack SplitChunksPlugin实用指南
Sep 17 Javascript
vue.js的vue-cli脚手架中使用百度地图API的实例
Jan 21 Javascript
Angular脚手架开发的实现步骤
Apr 09 Javascript
django中使用vue.js的要点总结
Jul 07 Javascript
JavaScript中0、空字符串、'0'是true还是false的知识点分享
Sep 16 Javascript
浅谈Vue.use到底是什么鬼
Jan 21 Javascript
基于vue.js实现购物车
Jan 15 #Javascript
原生js+css调节音量滑块
Jan 15 #Javascript
Vue 图片压缩并上传至服务器功能
Jan 15 #Javascript
JS函数进阶之继承用法实例分析
Jan 15 #Javascript
JS函数进阶之prototy用法实例分析
Jan 15 #Javascript
JS函数基本定义与用法示例
Jan 15 #Javascript
JS几个常用的函数和对象定义与用法示例
Jan 15 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP通用分页类page.php[仿google分页]
2008/08/31 PHP
PHP文件上传问题汇总(文件大小检测、大文件上传处理)
2015/12/24 PHP
PHP实现搜索地理位置及计算两点地理位置间距离的实例
2016/01/08 PHP
Yii2中使用join、joinwith多表关联查询
2016/06/30 PHP
让ie6也支持websocket采用flash封装实现
2013/02/18 Javascript
JQuery的ready函数与JS的onload的区别详解
2013/11/21 Javascript
JS操作CSS随机改变网页背景实现思路
2014/03/10 Javascript
jQuery简单实现iframe的高度根据页面内容自适应的方法
2016/08/01 Javascript
js检查是否关闭浏览器的方法
2016/08/02 Javascript
jquery表单验证实例仿Toast提示效果
2017/03/03 Javascript
element-ui upload组件多文件上传的示例代码
2018/10/17 Javascript
示例vue 的keep-alive缓存功能的实现
2018/12/13 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
[43:57]Liquid vs Mineski 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/19 DOTA
用python读写excel的方法
2014/11/18 Python
Python实现的检测网站挂马程序
2014/11/30 Python
Django中对数据查询结果进行排序的方法
2015/07/17 Python
Python工程师面试必备25条知识点
2018/01/17 Python
用Python一键搭建Http服务器的方法
2018/06/01 Python
python3 打印输出字典中特定的某个key的方法示例
2019/07/06 Python
python实现将文件夹内的每张图片批量分割成多张
2019/07/22 Python
手动安装python3.6的操作过程详解
2020/01/13 Python
Python实现初始化不同的变量类型为空值
2020/06/02 Python
C#面试题
2016/05/06 面试题
介绍一下XMLHttpRequest对象
2012/02/12 面试题
明信片寄语大全
2014/04/08 职场文书
团支部建设方案
2014/05/02 职场文书
个人更名证明
2015/06/23 职场文书
2016新党章学习心得体会
2016/01/15 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
解决Navicat for Mysql连接报错1251的问题(连接失败)
2021/05/27 MySQL
《传颂之物 虚伪的假面》BD发售宣传CM公开
2022/04/04 日漫
Python万能模板案例之matplotlib绘制直方图的基本配置
2022/04/13 Python
GO语言字符串处理函数之处理Strings包
2022/04/14 Golang
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android