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 相关文章推荐
学习面向对象之面向对象的基本概念:对象和其他基本要素
Nov 30 Javascript
js 实现图片预加载(js操作 Image对象属性complete ,事件onload 异步加载图片)
Mar 25 Javascript
ASP.NET jQuery 实例13 原创jQuery文本框字符限制插件-TextArea Counter
Feb 03 Javascript
js报$ is not a function 的问题的解决方法
Jan 20 Javascript
JS是按值传递还是按引用传递
Jan 30 Javascript
Node.js实现Excel转JSON
Apr 24 Javascript
JavaScript中apply方法的应用技巧小结
Sep 29 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
jQuery选取所有复选框被选中的值并用Ajax异步提交数据的实例
Aug 04 jQuery
使用yeoman构建angular应用的方法
Aug 14 Javascript
Vue实现用户自定义字段显示数据的方法
Aug 28 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 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实现登录验证码校验功能
2018/05/17 PHP
使用户点击后退按钮使效三行代码
2007/07/07 Javascript
js导航栏单击事件背景变换示例代码
2014/01/13 Javascript
from表单多个按钮提交用onclick跳转不同action
2014/04/24 Javascript
点击A元素触发B元素的事件在IE8下会识别成A元素
2014/09/04 Javascript
javascript在当前窗口关闭前检测窗口是否关闭
2014/09/29 Javascript
详谈JavaScript内存泄漏
2014/11/14 Javascript
javascript笛卡尔积算法实现方法
2015/04/08 Javascript
详细解读AngularJS中的表单验证编程
2015/06/19 Javascript
js实现的简单图片浮动效果完整实例
2016/05/10 Javascript
EasyUI在表单提交之前进行验证的实例代码
2016/06/24 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
百度多文件异步上传控件webuploader基本用法解析
2016/11/07 Javascript
基于JQuery实现的跑马灯效果(文字无缝向上翻动)
2016/12/02 Javascript
Angular 开发学习之Angular CLI的安装使用
2017/12/31 Javascript
JavaScript中.min.js和.js文件的区别讲解
2019/02/13 Javascript
webpack+vue.js构建前端工程化的详细教程
2020/05/10 Javascript
vue 解决无法对未定义的值,空值或基元值设置反应属性报错问题
2020/07/31 Javascript
Vue的v-model的几种修饰符.lazy,.number和.trim的用法说明
2020/08/05 Javascript
Vue 打包的静态文件不能直接运行的原因及解决办法
2020/11/19 Vue.js
[01:32:10]NAVI vs VG Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
用Python的Django框架编写从Google Adsense中获得报表的应用
2015/04/17 Python
python实现二分查找算法
2017/09/21 Python
十分钟利用Python制作属于你自己的个性logo
2018/05/07 Python
基于python的socket实现单机五子棋到双人对战
2020/03/24 Python
Django框架模板用法入门教程
2019/11/04 Python
Python Print实现在输出中插入变量的例子
2019/12/25 Python
使用Python求解带约束的最优化问题详解
2020/02/11 Python
美国护肤咨询及美容产品电商:Askderm
2017/02/24 全球购物
澳大利亚领先的在线美容商店:Facial Co
2017/10/22 全球购物
美国著名手表网站:Timepiece
2017/11/15 全球购物
Laura Geller官网:美国彩妆品牌
2018/12/29 全球购物
国际商贸专业自荐信
2014/06/09 职场文书
爱晚亭导游词
2015/02/09 职场文书
大学生思想道德自我评价
2015/03/09 职场文书
先进党支部事迹材料2016
2016/02/26 职场文书