自己写的一段文字向上滚动特效,没有效果求指点。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style>
#test{
height:120px;
}
#test ul li{
}
#test00{
line-height:normal;
overflow:hidden;
}
#test00 ul li{
list-style-type:none;
}
</style>
</head>
<body>
<script language="javascript">
function scroll01()
{
function scroll02()
{
var a = document.getElementById("test00");
var x = document.getElementById("test");
var y = document.getElementById("test01");
a.scrollTop=a.scrollTop-x.offsetHeight;
};
setInterval("scroll02()",10);
}
</script>
<div id="test00">
<div id="test">
<ul>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
</ul>
</div>
<div id="test01"></div>
</div>
<script language="javascript">scroll01();</script>
</body>
</html>
</html>
[解决办法]
你使用scrollTop属性,所以父元素的高度要比子元素小才有滚动效果;另外,那个x.offsetHeight一直是0。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>文档</title>
<style type="text/css">
#test {
}
#test ul li {
}
#test00 {
line-height: normal;
overflow: hidden;
height: 100px;
}
#test00 ul li {
list-style-type: none;
}
</style>
</head>
<body>
<div id="test00">
<div id="test">
<ul>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
<li>wo</li>
<li>ai</li>
<li>ni</li>
</ul>
</div>
<div id="test01"></div>
</div>
<script type="text/javascript">
function scroll02() {
var a = document.getElementById("test00");
a.scrollTop = a.scrollTop + 10;
};
setInterval("scroll02()", 1000);
</script>
</body>
</html>