为什么我加了add(e).preventDefault();还是会有默认的事件呢?
另外..
var slider = $("slider").offsetHeight - $("slider_btn").offsetHeight;
var list = $("box").offsetHeight - $("list").offsetHeight;
var result = list / slider;//这里为什么要除以?
我的数学好差啊
- HTML code
<!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>