当前位置 : 主页 > 网络编程 > JavaScript >

间歇性滚动(源代码)

来源:互联网 收集:自由互联 发布时间:2021-07-03
间歇性滚动(源代码) 1. [代码] [JavaScript]代码 !DOCTYPE htmlhtmlheadmeta charset="utf-8"meta http-equiv="X-UA-Compatible" content="IE=edge"title/titlestyle *{margin:0;padding:0;} .div{margin:100px auto 0;width:350px;height:16
间歇性滚动(源代码)

1. [代码][JavaScript]代码    

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title></title>
	<style>
	  *{margin:0;padding:0;}
       .div{margin:100px auto 0;width:350px;height:168px; background:#fff;border:5px solid #ccc; border-radius:5px; overflow:hidden;padding:5px; cursor: pointer;}
       .div ul li{list-style:none;height:24px; line-height: 24px; text-overflow:ellipsis; font-size: 12px; white-space:nowrap; overflow: hidden;}
	</style>
</head>
<body>
	 <div class="div" id="div">
  	<ul>
  		<li>1、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德萨</li>
  		<li>2、分看见地上放声大哭了范上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了德</li>
  		<li>3、分看见地声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
  		<li>4、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
  		<li>5、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
  		<li>6、分看见地上放声大哭了范声大哭了上放声大哭了</li>
  		<li>7、分看见地上放声大哭了上放声大哭了上放声大哭了范上放声大哭了上放声大哭了德</li>
  		<li>8、分看见地上放声大哭了上放声大哭了上放声大哭了上放声大哭了范德</li>
  	</ul>
  </div>
 <script type="text/javascript">


	 var area = document.getElementById('div');
	 var iliHeight = 24;//单行滚动的高度
	 var speed = 50;//滚动的速度
	 var time;
	 var delay= 1000;
	 area.scrollTop=0;
	 area.innerHTML+=area.innerHTML;//克隆一份一样的内容
	 function startScroll()
	 {
		 time=setInterval("scrollUp()",speed);
		 area.scrollTop++;
	 }

	 function scrollUp()
	 {
		 if(area.scrollTop % iliHeight==0)
		 {
			 clearInterval(time);
			 setTimeout(startScroll,delay);
		 }else{
			 area.scrollTop++;
			 if(area.scrollTop >= area.scrollHeight/2){
				 area.scrollTop =0;
			}
		}
	}
	setTimeout(startScroll,delay)



 
 </script>
</body>
</html>
网友评论