JS实现音量控制拖动
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
本文实例为大家分享了JS实现音量控制拖动的具体代码,供大家参考,具体内容如下
描述:
JS——实现音量控制拖动
1)、有底条,有拖拽按钮
2)、设置最小和最大值
3)、拖动定位后,抛出事件当前的所在值
效果:
实现:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 | <!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 > |
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如若内容造成侵权/违法违规/事实不符,请将相关资料发送至 reterry123@163.com 进行投诉反馈,一经查实,立即处理!
相关文章
js与jQuery实现获取table中的数据并拼成json字符串操作示例
这篇文章主要介绍了js与jQuery实现获取table中的数据并拼成json字符串操作,涉及javascript与jQuery针对HTML页面table表格数据获取、遍历及json字符串拼接相关操作技巧,需要的朋友可以参考下2018-07-07JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
这篇文章主要介绍了JavaScript数据结构与算法之二叉树插入节点、生成二叉树,结合实例形式较为详细的分析了javascript二叉树相关概念、定义、节点插入、遍历输出等相关操作技巧,需要的朋友可以参考下2019-02-02
最新评论