<!DOCTYPE HTML>
<html>
<head>
<title>soul42</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" >
<STYLE type="text/css">
* { margin:0; padding:0;}
body{width:100%;height:100%;}
#list{width:500px;float:left;position:relative;height:100px;overflow:hidden}
#list ul{position:absolute;top:0;left:0;}
#slider{float:left;width:8px;background:#ccc;height:100px;position:relative}
#sliderBtn{position:absolute;left:0;top:0;height:30px;background:red;width:8px}
#wrap{}
#wrap1{clear:both;}
#list1{width:500px;float:left;position:relative;height:100px;overflow:hidden}
#list1 ul{position:absolute;top:0;left:0;}
#slider1{float:left;width:8px;background:#ccc;height:100px;position:relative}
#sliderBtn1{position:absolute;left:0;top:0;height:30px;background:red;width:8px}
</STYLE>
</head>
<body>
<div id="wrap">
<div id="list">
<ul id="ul">
<li>NET平台自由职业互助群2222222222222</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群111111111111</li>
</ul>
</div>
<div id="slider">
<div id="sliderBtn">
</div>
</div>
</div>
<div id="wrap1">
<div id="list1">
<ul id="ul1">
<li>NET平台自由职业互助群2222222222222</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群</li>
<li>NET平台自由职业互助群111111111111</li>
</ul>
</div>
<div id="slider1">
<div id="sliderBtn1">
</div>
</div>
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
var obj = {
list:function(ul,list){
return ul.offsetHeight - list.offsetHeight;
},
sliderH:function(sliderBtn,slider){
return slider.offsetHeight - sliderBtn.offsetHeight;
},
func:function(sliderBtn,slider,list,ul){
var sh = this.sliderH(sliderBtn,slider);
var sl = this.list(ul,list);
var result = sl / sh;
sliderBtn.onmousedown = function(e){
var e = e|| window.event;
var y = e.clientY - this.offsetTop;
if(e.preventDefault){
e.preventDefault()
}
document.onmousemove = function(e){
var e = e|| window.event;
var posY = e.clientY - y;
console.log(result)
if(posY < 0){
sliderBtn.style.top = "0px";
ul.style.top = "0px";
}else if(posY > sh){
sliderBtn.style.top = sh+"px";
ul.style.top =-sl+"px";
}else{
sliderBtn.style.top = posY +"px";
ul.style.top = (posY * -result)+"px";
}
}
}
}
}
obj.func($("sliderBtn"),$("slider"),$("list"),$("ul"))
obj.func($("sliderBtn1"),$("slider1"),$("list1"),$("ul1"))
document.onmouseup = function(){
document.onmousemove = null;
}
</script>
</body>
</html>
