JS实现音量控制拖动
更新时间：2020年01月15日 14:37:12 作者：SSSkyCong
这篇文章主要为大家详细介绍了JS实现音量控制拖动，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了JS实现音量控制拖动的具体代码，供大家参考，具体内容如下
描述：
JS——实现音量控制拖动
1）、有底条，有拖拽按钮
2）、设置最小和最大值
3）、拖动定位后，抛出事件当前的所在值
效果：
实现：
<!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实现动态CSS换肤技术的脚本...2007-06-06
正则的思想都是一样的,但是具体的写法会有所不同,下面这篇文章主要给大家介绍了关于JavaScript正则表达式中g标志的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-03-03
下面小编就为大家带来一篇javaScript中的原型解析【推荐】。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
需要添加几组数据到数据库，但是具体几组数据不确定，有客户来填写，所以，这里我用JS进行添加删除子方案，并要对方案输入的正确性加以判断，感兴趣的朋友可以了解下2013-04-04
这篇文章主要为大家详细介绍了js事件处理程序跨浏览器解决方案，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要为大家详细介绍了Bootstrap和Java分页实例第二篇，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2016-12-12
脚本实现文件下载，这个是jscript的，脚本之家以前曾发布vbscript版本的,原理一样的。2009-10-10
大家心里是否产生过这样的疑问,JS中既然已经有对象这种数据结构,我们为什么还要再单独去使用Set或者Map呢?下面这篇文章主要给大家介绍了关于ES6中Set和Map数据结构的相关资料,需要的朋友可以参考下2022-08-08
这篇文章主要为大家详细介绍了js实现单张图片平移切换效果，一张图移动到左边以后，从底部移回最右，等待下一次循环，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-10-10
这篇文章主要介绍了网站基于flash实现的Banner图切换效果代码,是基于Flash与js实现的banner图片自动定时切换特效,并附有完整的示例源码,非常具有实用价值,需要的朋友可以参考下2014-10-10
最新评论