这个下拉效果一直很困惑.求解
为什么我加了add(e).preventDefault();还是会有默认的事件呢?
另外..
var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;
var list = $("box").offsetHeight - $("list").offsetHeight;
var result = list / slider;//这里为什么要除以?
我的数学好差啊
<!doctype HTML><html> <head><title>scroll</title> <style type="text/css"> #box{width:400px;height:143px;overflow:hidden;position:relative;float:left} ul{position:absolute;left:0;top:0;margin:0px} #slider{width:10px;height:143px;background:#ccc;float:left;position:relative} #slider_btn{position:absolute;top:0;left:0;height:30px;width:10px;background:orange} </style> </head> <body> <div>dsfdsfdsf</div> <div id="box"> <ul class="list" id="list"> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/155623569658.shtml">住建部：地方住房限购令到期后需延续</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/174323569784.shtml">卫生部称百姓餐桌上乳品标准只高不低</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/170923569752.shtml">台湾地区领导人选举举行首次电视辩论</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/c/2011-12-03/195123569926.shtml">全国明日起将迎来大范围雨雪降温</a></li> <li><span class="W_textdot"></span><a target="_blank" href="http://news.sina.com.cn/w/2011-12-03/210023570002.shtml">欧航局放弃联系搭载中方萤火一号的火星探测器</a></li> </ul> </div> <div id="slider"> <div id="slider_btn"> </div> </div> <script type="text/javascript"> var $ = function(id){return document.getElementById(id)}; var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight; var list = $("box").offsetHeight - $("list").offsetHeight; var result = list / slider; function add(e){ return e||window.event; } $("slider_btn").onmousedown = function(e){ var posY = add(e).clientY - this.offsetTop; document.onmousemove = function(e){ var y = add(e).clientY - posY; add(e).preventDefault(); if(y<0){ $("slider_btn").style.top = "0px"; } else if(y > slider){ $("slider_btn").style.top = slider +"px"; } else{ $("slider_btn").style.top = y +"px"; $("list").style.top = (result*y)+"px" } } } document.onmouseup = function(){ document.onmousemove = null; } </script> </body></html>