js简单小程序练习-排行榜文字向上滚动

最新推荐文章于 2024-03-12 14:47:22 发布

爱上喝水的女孩

最新推荐文章于 2024-03-12 14:47:22 发布

阅读量855

点赞数

分类专栏： js 文章标签： js小练习

js 专栏收录该内容

10 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面利用CSS样式和JavaScript代码实现了文字向上滚动的效果。通过设置两个相同的列表并不断更新滚动位置，使得列表内的文字能够连续滚动显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本人还在学习阶段，本着把基础知识先熟悉了，然后在例子中加深印象，下面这段代码是在网上找的，当练习使用。

<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />            
        <meta name="keywords" content="关键字1,关键字2" />        
        <meta name="Description" content="描述信息" />
		<title>文字向上滚动</title>
		<style type="text/css">
			*{margin: 0px;padding: 0px;}
			ul,li{list-style: none;display:block;}
			#scrollBox{width: 300px;height: 150px;margin: 100px auto;background: #f00;overflow: hidden;}			
			#scrollBox #con1,#con2{width: 280px;float: left;}
			#scrollBox li{height: 15px;line-height: 15px;text-align: center;}
		</style>
	</head>
	<body>
		<div id="scrollBox">
	<ul id="con1">
	    <li>aaaaaa<li>
            <li>bbbbbb<li>
            <li>cccccc<li>
            <li>dddddd<li>
            <li>eeeeee<li>
            <li>ffffff<li>
            <li>gggggg<li>//这里为什么会写成<li><li>//而没有结束标签应该是跟浏览器有关，后期再解释。
   			</ul>
			<ul id="con2"></ul>
		</div>
		<script type="text/javascript">
			
			var area = document.getElementById('scrollBox');
			var con1 = document.getElementById('con1');
			var con2 = document.getElementById('con2');
			
			con2.innerHTML = con1.innerHTML;//把con1的内容复制给con2实现联系的向上滚动
			
			function scrollUp(){
				if(area.scrollTop >= con1.offsetHeight){
					area.scrollTop = 0;
				}else{
					area.scrollTop++
				}
			}
			
			var time=50;
			var mytimer=setInterval(scrollUp,time);
			area.οnmοuseοver=function(){
				clearInterval(mytimer);
			}
			area.οnmοuseοut=function(){
				mytimer=setInterval(scrollUp,time);
			}
		</script>
	</body>
</html>