JS实现网站公告无限次滚动

最新推荐文章于 2021-06-09 18:08:11 发布

梦康

最新推荐文章于 2021-06-09 18:08:11 发布

阅读量1.1k

点赞数

分类专栏： JS

JS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<html>
	<head>
		<title>HTML DOM</title>
		<style type="text/css">
			*{margin:0px;padding:0px;}
			ul{margin-left:20px;}
			ul li{line-height:25px;}
			#did{overflow:hidden;}
		</style>
		<script type="text/javascript">
			
			function doinit(){
				document.getElementById("c2").innerHTML=document.getElementById("c1").innerHTML;
				dorun();
			}
			
			//运行滚动
			var mytime=null;
			function dorun(){
				var did = document.getElementById("did");
				var c1 = document.getElementById("c1");
				if(did.scrollTop==c1.offsetHeight){
					did.scrollTop=0;
				}else{
					did.scrollTop++;
				}
				mytime=setTimeout("dorun()",50);
			}
			
			//启动
			function doStart(){
				if(mytime==null){
					dorun();
				}
			}
			//停止
			function doStop(){
				if(mytime!=null){
					clearTimeout(mytime);
					mytime=null;
				}
			}
		</script>	
	</head>
	<body οnlοad="doinit()">
		<center>
		<!-- html注释 -->
			<h2 style="color:red">混动字幕</h2>
			<div id="did" οnmοuseοver="doStop()" οnmοuseοut="doStart()" style="width:260px;height:100px;text-align:left;border:1px solid blue;">
				<div id="c1">
					<ul>
						<li>会保持对象在正常的HTML流中</li>
						<li>但是它的位置可以根据它的</li>
						<li>前一个对象进行偏移。</li>
						<li>在相对(relative)定位对象之</li>
						<li>后的文本或对象占有他们自己</li>
						<li>的空间而不会覆盖被定位对象</li>
						<li>的自然空间在绝对(absolute)</li>
						<li style="color:red">滚动条不会出现。</li>
					</ul>
				</div>
				<div id="c2">
					
				</div>
			</div>
		</center>
	</body>
</html>

梦康

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS实现网站公告无限次滚动

HTML DOM *{margin:0px;padding:0px;} ul{margin-left:20px;} ul li{line-height:25px;} #did{overflow:hidden;} function doinit(){ document.getElementById("c2").innerHTML=doc
复制链接

扫一扫

专栏目录