javascript文字不间断向上翻屏效果-Javascript-技术教程-asp编程网

javascript文字不间断向上翻屏效果

2009-04-21 20:57:45 来源：lueidea 作者：佚名浏览量:1857 收藏

javascript文字不间断向上翻屏效果，适合在页面上有限的地方显示多个内容
<html>
<head>
<title>文字不间断向上翻屏</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
body{ margin:0; font-size:12px; text-align:center;}
#demo{text-align:center; margin:0 auto; width:500px; height:40px; line-height:19px; overflow:hidden; margin-top:20px;}
#demo1{ height:60px;}
ul{ margin:0; list-style:none;}
li{ display:block; float: left; width:180px; border-bottom:dashed 1px #CCCCCC; margin-left:20px; height:19px; text-align:left}
a{ text-decoration:none; color:#000000;}
</style>
<script type="text/javascript">
function scrollInterval()
{
  demo2.innerHTML=demo1.innerHTML;
  if(demo.scrollTop==2*demo1.scrollHeight-demo.offsetHeight)
  {
   demo.scrollTop=demo1.scrollHeight-demo.offsetHeight;
  }
  else
  {
   demo.scrollTop++;
  }
  if(demo.scrollTop%40==0)
  {
   window.setTimeout( "scrollInterval()", 2000 );
  }
   else
   {
   window.setTimeout( "scrollInterval()", 50 );
   }
}
window.onload=function b()
{
  var demo=document.getElementById("demo");
  var demo1=document.getElementById("demo1");
  var demo2=document.getElementById("demo2");
  window.setTimeout("scrollInterval()",2000);
}
</script>
</head>
<body>
<div id="demo">
<ul id="demo1">
    <li><a href="http://www.baidu.com" target="_blank">关于内容的测试容，此无法处容</a></li>
    <li><a href="http://www.aspprogram.cn" target="_blank">asp编程网-专业的asp网站</a></li>
    <li><a href="http://www.google.cn" target="_blank">测参加多方怪那发哦就，分离内容</a></li>
    <li><a href="http://www.sina.com.cn" target="_blank">追求时代的发展，名义的东西</a></li>
    <li><a href="http://www.163.cn" target="_blank">曾经该怎么作呢，追求什么呢</a></li>
    <li><a href="http://www.tom.com" target="_blank">改变一些样式该怎么办？</a></li>
</ul>
<ul id="demo2"></ul>
</div>
</body>
</html>

javascript文字不间断向上翻屏效果

最新相关教程

热门教程

推荐教程