仿播放器水平拖動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平拖動滾動</title>
<style>
#box{
width: 400px;
height: 10px;
background-color: #ccc;
margin: 100px auto;
position: relative;
}
#drag{
width: 10px;
height: 20px;
background-color:#369;
position: absolute;
left: 0;
top: -5px;
cursor: pointer;
}
#mask{
width: 0px;
height: 100%;
background-color: #369;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<div id="box">
<div id="drag"></div>
<div id="mask"></div>
</div>
</body>
<script>
var box = document.getElementById("box");
var drag = box.children[0];
var mask = document.getElementById("mask");
//鼠標按下
drag.onmousedown = function(event){
var event = event || window.event;
// alert("11");
var leftVal = event.clientX - this.offsetLeft;
// alert(drag.style.left)
//鼠標拖動時
var that = this;
document.onmousemove = function(event){
var event = event || window.event;
//得到拖動盒子的父親到屏幕的距離
that.style.left = event.clientX - leftVal +"px";
var val = parseInt(that.style.left);
if(val < 0){
that.style.left = 0;
}else if( val > 390){
that.style.left = 390+"px";
}
// console.log(that.style.left)
//鼠標拖動時遮罩盒子的寬度=滑塊移動的距離
mask.style.width = that.style.left
}
//鼠標彈起時不做任何操作
document.onmouseup = function(){
document.onmousemove = null;
}
}
</script>
</html>
仿播放器水平拖動