如图红色div是我要显示内容的部分,当内容很多时候,我原本是让此div有滚动条,但是后来效果不好看,后来我把上面加上可上下调整的按钮,我有两个问题。一:如何当li(我用li显示每条的内容)数量多超过div高度时候如何判断,div高度只能定死的;二:问题一解决后,我想让鼠标放在向下的按钮,li就会自动下移,就向平时拖动滚动条一样平滑,向上同样,有什么好方法实现。谢谢各位大牛们。
调试欢乐多
<div style="border:1px solid red height:300px">高度定死
<ul>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li>
<li><input type="checkbox" .... />名称:..价格:.. + 数量 -</li></ul>
</div>
我想到一个办法.不知行不行
1先将DIV溢出设为隐藏,这样,超过DIV高度的就会看不见.
2 将要显示的LI内容统统放在marquee滚动标答内面,设置滚动速度为0
3,鼠标放在向下的按钮,发生JS事件,设置marquee滚动标答,向下滚动,并设置滚动速度这样子,应该可以吧,我也没试过,突然想出来的
<!--记得导入jquery库-->
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<style type="text/css">
body{text-align:center;}
div{height:200px;width:200px;border:1px solid red;overflow:hidden;}
ul{list-style:none;margin:0px;padding:0px;}
li{width:200px;line-height:20px;font-size:14px;}
</style>
<script type="text/javascript" src="js/jquery-1.3.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var content = $("#content");
var ofheight=content.height();
var i=0;
$("#down").click(function(){
content.scrollTop(content.scrollTop()+ofheight);
i++;
var scroll = ofheight*i;
if(scroll-content.scrollTop()>0){
$(this).attr("disabled",true);
}
$("#up").attr("disabled","");
})
$("#up").click(function(){
content.scrollTop(content.scrollTop()-ofheight);
i--;
if(content.scrollTop()<=0){
$(this).attr("disabled",true);
i=0;
}
$("#down").attr("disabled","");
})
})
</script>
</head>
<body>
<input id="up" type="button" value="向上查看"/>
<div id="content">
<ul>
<li>乞丐绝非“高收入群体”</li>
<li>曾经有一位媒体人,因为看到“乞丐年薪十万”的新</li>
<li>闻,心里不服,便卧底陪同乞讨,亲身体验“高收入行</li>
<li>业”。然而,他选择的这三位“全市知名乞丐”却颇不给力:</li>
<li>这三位分别被媒体曝光过的行乞者,最终的收成分别为23.73</li>
<li>元、65.75元和不足17元。</li>
<li>而欲达到“十万年薪”的标准,需要每天收入274元方</li>
<li>可,显而易见,这三位“知名乞丐”离这个标准还差得很远。</li>
<li>。“乞丐收入比白领高”“年薪十万”之</li>
<li>类的谣言也就不攻自破了。</li>
<li>乞丐绝非“高收入群体”</li>
<li>曾经有一位媒体人,因为看到“乞丐年薪十万”的新</li>
<li>闻,心里不服,便卧底陪同乞讨,亲身体验“高收入行</li>
<li>业”。然而,他选择的这三位“全市知名乞丐”却颇不给力:</li>
<li>这三位分别被媒体曝光过的行乞者,最终的收成分别为23.73</li>
<li>元、65.75元和不足17元。</li>
<li>而欲达到“十万年薪”的标准,需要每天收入274元方</li>
<li>可,显而易见,这三位“知名乞丐”离这个标准还差得很远。</li>
<li>。“乞丐收入比白领高”“年薪十万”之</li>
<li>类的谣言也就不攻自破了。</li>
</ul>
</div>
<input id="down" type="button" value="向下查看" />
</body>
</html>