<！DOCTYPE HTML>
<script>
window.onload = function(){
var slider1 =document.getElementById("slider1");
var slider2 =document.getElementById("slider2");
var slideTool =document.getElementById("slideTool");
var slideLeft =document.getElementById("slideLeft");
var slideRight =document.getElementById("slideRight");
var P1 =document.getElementById("p1");
//滑块1的鼠标按下事件
slider1.onmousedown=function(e){
var evt =e||event;
var x =evt.offsetX;
var y =evt.offsetY;
console.log("leftMouseDown");
//当触发滑块1鼠标按下事件时绑定鼠标移动事件
document.onmousemove=function(e){
var evt =e||event;
//根据鼠标的位置和外层的相对偏移量设置滑块的位置
slider1.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
if(evt.clientX-slideTool.offsetLeft-x<=0){
slider1.style.left="0px";
}
if(evt.clientX-slideTool.offsetLeft-x>=300){
slider1.style.left="300px";
}
if(slider1.offsetLeft >= slider2.offsetLeft-10){
//slider1.style.left = slider2.style.left;
slider1.style.left = slider2.offsetLeft - 10 + "px";
}
//根据滑块的偏移量计算数值
var value = Math.floor(slider1.offsetLeft/10);
slideLeft.style.width=slider1.offsetLeft+"px";
value = value+1;
if(parseInt(value) < 10){
value = '0' + value;
}
$("#value1").text(value);
$("#value1").attr("value",value);
}
//当鼠标按键抬起时解绑鼠标移动事件
document.onmouseup=function(){
document.onmousemove=null;
}
}
slider2.onmousedown=function(e){
var evt =e||event;
var x =evt.offsetX;
var y =evt.offsetY;
document.onmousemove=function(e){
var evt =e||event;
slider2.style.left=evt.clientX-slideTool.offsetLeft-x+"px";
if(evt.clientX-slideTool.offsetLeft-x<=0){
slider2.style.left="0px";
}
if(evt.clientX-slideTool.offsetLeft-x>=300){
slider2.style.left="300px";
}
if(slider2.offsetLeft-10 <= slider1.offsetLeft){
//slider2.style.left = slider1.style.left;
slider2.style.left = slider1.offsetLeft + 10 + "px";
}
var value = Math.floor(slider2.offsetLeft/10);
slideRight.style.width=slider2.offsetLeft+"px";
value = value+1 ;
if(parseInt(value) < 10){
value = '0' + value;
}
$("#value2").text(value);
$("#value2").attr("value",value);
}
document.onmouseup=function(){
document.onmousemove=null;
}
}
}
</script>
</head>
<body>
<div id="slideToolCtrol">
<div id="slideToolBorder">
<div id="slideTitle">
<span id="titleSpan">档位</span>
</div>
<div id="slideTool" class="slideTool">
<div id="slideLeft" class="slideLeft">
<span id="slider1" class="slider1">
<span id="value1" value="01">01</span>
</span>
</div>
<div id="slideRight" class="slideRight">
<span id="slider2" class="slider2">
<span id="value2" value="31">31</span>
</span>
</div>
</div>
</div>
</div>
</body>