信息滚动

文字无缝信息滚动：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>信息滚动</title>
	<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#hh{width: 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}

	</style>
</head>
<body>
<div id="hh">
	<ul id="con1">
		<li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li>
		<li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
		<li>3、是水水水水水水水水水水水水水水水水</li>
		<li>4、人人人人人人人人人人人人人人人人人人人人人人人</li>
		<li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
		<li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
		<li>7、天天天天天天天天天天天天天天天天天天天天天</li>
		<li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
		<li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
		<li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
		<li>11、天天天天天天天天天天天天天天天天天天天天天</li>
		<li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
	</ul>
	<ul id="con2"></ul>
</div>	
<script type="text/javascript">
var hh=document.getElementById('hh');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var time=50;

hh.scrollTop=0;
con2.innerHTML=con1.innerHTML;

function scrollUp(){

	if (hh.scrollTop>=con1.offsetHeight) {
		hh.scrollTop=0;
	}else{
		hh.scrollTop++;
	}
}


var myScroll=setInterval('scrollUp()',time);

hh.onmouseover=function(){
	clearInterval(myScroll);
}
hh.onmouseout=function(){
	 myScroll=setInterval('scrollUp()',time);
}

	</script>
</body>
</html>

　　

间歇性信息滚动：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>间歇性信息滚动</title>
	<style type="text/css">
*{margin: 0px;padding: 0px;}
ul{list-style: none;}
#hh{width: 400px;height: 144px;margin-top:100px;margin-left: 400px; background-color: green;overflow: hidden;border: 2px solid red;}

	</style>
</head>
<body>
<div id="hh">
	<ul id="con1">
		<li>1、大叔过一会你就是昆明大理石密度法规和女的名称是</li>
		<li>2、啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</li>
		<li>3、是水水水水水水水水水水水水水水水水</li>
		<li>4、人人人人人人人人人人人人人人人人人人人人人人人</li>
		<li>5、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
		<li>6、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
		<li>7、天天天天天天天天天天天天天天天天天天天天天</li>
		<li>8、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
		<li>9、想嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻嘻</li>
		<li>10、鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿鹅鹅鹅饿</li>
		<li>11、天天天天天天天天天天天天天天天天天天天天天</li>
		<li>12、啦啦啦啦啦啦啦啦啦啦啦啦啦啦啦了</li>
	</ul>
	<ul id="con2"></ul>
</div>	
<script type="text/javascript">
var hh=document.getElementById('hh');
var con1=document.getElementById('con1');
var con2=document.getElementById('con2');
var time=50;
var liheight=24;
hh.scrollTop=0;
con2.innerHTML=con1.innerHTML;

function starMove(){
	hh.scrollTop++;
	 myScroll=setInterval('scrollUp()',time);
}

function scrollUp(){
   // hh.scrollTop++;
   if(hh.scrollTop%liheight==0){
   	clearInterval(myScroll);
   	setTimeout('starMove()',2000);
   }else{
   	hh.scrollTop++;
   	if (hh.scrollTop>=hh.scrollHeight/2) {
   		hh.scrollTop=0;
   	}
   }
}

 setTimeout('starMove()',2000);

	</script>
</body>
</html>

　　

posted @ 2016-08-23 17:02  她的天空之城  阅读(167)  评论(0)  编辑  收藏  举报