日期:2014-05-16 浏览次数:20427 次
<!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;