原生js实现滑动加音量

最新推荐文章于 2023-10-26 09:03:52 发布

岁月如歌_

最新推荐文章于 2023-10-26 09:03:52 发布

阅读量3.7k

点赞数

分类专栏：原生js javascript

本文链接：https://blog.csdn.net/namechenfl/article/details/81409043

版权

javascript 同时被 2 个专栏收录

24 篇文章 1 订阅

订阅专栏

原生js

13 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{width: 430px;height: 40px;border: 1px solid #000;margin: 300px;position: relative;}
			#box1{width: 0px;height: 40px;background: green;position: absolute;}
			#span1{height: 60px;width: 30px;background: green;display: block;border-radius: 10px;position: absolute;top: -10px;}
			p{position:absolute;width: 200px;height: 40px;top:50px;text-align:center;line-height: 40px;font-size: 32px;}
		</style>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<span id="span1">
					
				</span>
			</div>
			<p id="p1"></p>
		</div>
		
		<script type="text/javascript">
			var Span =document.getElementById("span1");
			var Box =document.getElementById("box");
			var Box1 =document.getElementById("box1");
			var P1 =document.getElementById("p1");
			Span.onmousedown=function(e){
				var evt =e||event;
				var x =evt.offsetX;
				var y =evt.offsetY;
				//console.log(x)
				//console.log("Aa")
				Box.onmousemove=function(e){
					var evt =e||event;
					Span.style.left=evt.clientX-Box.offsetLeft-x+"px";
					if(evt.clientX-Box.offsetLeft-x<=0){
						Span.style.left="0px";
					}
					if(evt.clientX-Box.offsetLeft-x>=400){
						Span.style.left="400px";
					}
					//console.log(Span.offsetLeft);
					P1.innerHTML="音量："+Math.floor(Span.offsetLeft/4);
					Box1.style.width=Span.offsetLeft+"px";
					
				}
				document.onmouseup=function(){
					//Box1.style.width=evt.offsetX+"px";
					Box.onmousemove=null;
				}
			}
		</script>
	</body>
</html>