js 文字下上滚动效果-JavaSript-爱易网页

js 文字下上滚动效果

日期：2014-05-16　浏览次数：20329 次

js 文字上下滚动效果

<!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=utf-8" /> 
<title> new document </title>
<style type="text/css">
#scroll {margin:0;padding:2px 0;list-style:none;border:1px solid red;width:600px;height:18px;overflow:hidden}
#scroll li {margin:0;padding:0 4px;font-size:12px;height:18px;line-height:18px;width:600px;}
</style>
<script type="text/javascript">
window.onload = function() {
 dMarquee('scroll');
}

function dMarquee(id){
 var speed=20; //速度
 var stop=1000; //停止时间 

 var ul = document.getElementById(id);//获取ul元素
 var rows=ul.getElementsByTagName('li').length;//获取li个数
 var height = ul.getElementsByTagName('li')[0].offsetHeight;//取得第一个li的高度

 ul.innerHTML += ul.innerHTML;//获取所有li

 var timeID = false;//settime的时间标示
 //移动方法
 var play = function() {
  ul.scrollTop++;//移动滚动条

  //移动到底的时候恢复为零
  if(ul.scrollTop==rows*height){
   ul.scrollTop=0;
  }
	//每次滚动
  if(ul.scrollTop%height==0) {
   timeID = setTimeout(play,stop);
  }else{
   timeID = setTimeout(play,speed);
  } 
 }

 timeID = setTimeout(play,stop);


 ul.onmouseover = function() {clearTimeout(timeID);}
 ul.onmouseout = play;
}

</script>
</head>

<body>
<embed src="http://player.youku.com/player.php/sid/XMTY3MDMyMzg4/v.swf" quality="high" width="480" height="400" align="middle" allowScriptAccess="sameDomain" type="application/x-shockwave-flash"></embed>
<ul id="scroll">
 <li>.莫比初级教学班开课了		.秋季班现在要开课了快来参加吧			.就这样的开始了</li>
 <li><a href="">.莫比初级教学班开课了</a>		.秋季班现在要开课了快来参加吧			.就这样的开始了</li>
 <li>.莫比初级教学班开课了		<a href="">.秋季班现在要开课了快来参加吧</a>			.就这样的开始了</li>
 <li>.莫比初级教学班开课了		.秋季班现在要开课了快来参加吧			.就这样的开始了</li>
</ul>
</body>
</html>

1 楼 bupt_roy 2011-10-14

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js 文字下上滚动效果

相关资料更多>

推荐阅读更多>