<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>水平拖动滚动</title>
<style>
#box{
400px;
height: 10px;
background-color: #ccc;
margin: 100px auto;
position: relative;
}
#drag{
10px;
height: 20px;
background-color:#369;
position: absolute;
left: 0;
top: -5px;
cursor: pointer;
}
#mask{
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>