日期:2014-05-16 浏览次数:20487 次
<!doctype html>
<html>
<head>
<style type="text/css">
*{padding:0;margin:0;}
.fl{float:left;display:inline;}
.fr{float:right;display:inline;}
#wrap{width:300px;margin:55px auto;height:125px;position:relative;overflow:hidden;float:left}
#list{position:absolute;top:0;left:0;}
#slider{width:8px;height:125px;background:#ccc;float:left;margin-top:55px;position:relative}
#sliderbtn{position:absolute;top:0;left:0;height:30px;width:8px;background:orange}
</style>
<!--<script type="text/javascript" src="jquery-1.6.min.js">
</script>-->
</head>
<body>
<div id="wrap">
<ul id="list">
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
<li><a href="">Windows 8 让开发者蛋疼的十个原因</a></li>
</ul>
</div>
<div id="slider">
<div id="sliderbtn">
</div>
</div>
<script type="text/javascript">
var $ = function(id){return document.getElementById(id)}
var obj = {
addEvent:function(e){
return e || window.event;
},
eventHandler:function(elem,type,func){
if(elem.addEventListener){
elem.addEventListener(type,func,false)
}else if(elem.attachEvent){
elem.attachEvent("on"+type,func)
}else{
elem["on"+type] = func;
}
},
removeHandler:function(elem,type,func){
if(elem.removeEventListener){
elem.removeEventListener(type,func,false)
}else if(elem.detachEvent){
elem.detachEvent("on"+type,func)
}else{
elem["on"+type] = null;
}
}
}
var sliderbtn = $("sliderbtn");
var slider = $("slider");
var wrap = $("wrap");
var list = $("list");
var listTar = list.offsetHeight - wrap.offsetHeight;