js实现消息滚动

最新推荐文章于 2023-01-07 22:05:10 发布

归属i

最新推荐文章于 2023-01-07 22:05:10 发布

阅读量608

点赞数

CC 4.0 BY-SA版权

分类专栏：前端文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_43877725/article/details/108533223

前端专栏收录该内容

9 篇文章

订阅专栏

本文通过JavaScript详细讲解如何实现消息滚动效果，包括关键代码实现和成功案例展示。

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

具体实现代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style type="text/css">
    #box{
    	width:260px;
    	height:100px;
    	margin:0 auto;
    	border:2px solid red;
    	overflow: hidden}
    ul{
    	padding:0;
    	margin:0;
    	list-style: none;
    	overflow: hidden}
    ul li{
    	height:24px;
    	line-height: 24px;
    	padding-left:10px;}


  </style>
</head>
<body>
<div id="box">
  <ul id="con1" onMouseOut="Up()" onMouseOver="Stop()">
     <li>第一段话 </li>
     <li>第二段话 </li>
     <li>第三段话 </li>
     <li>第四段话 </li>
     <li>第五段话 </li>
     <li>第六段话 </li>
  </ul>
  <ul id="con2">
  	
  </ul>
</div>
</body>
<script type="text/javascript">
  var box=document.getElementById("box");
  var con1=document.getElementById("con1");
  var con2=document.getElementById("con2");
  var s=document.getElementsByTagName("a");
  var speed=50;
  
  //con1的内容可以进行自定义
  //con2的内容与con1的内容一致
  con2.innerHTML=con1.innerHTML;
  
  function ScrollUp(){
    if( box.scrollTop>=con1.scrollHeight){
      box.scrollTop=0;
    }else
      box.scrollTop++;
  }
  
  var i=setInterval("ScrollUp()",speed);
  
  function Stop(){
    clearInterval(i);
  }
  function Up(){
    i=setInterval("ScrollUp()",speed);
  }
  
</script>
</html>

成功示例
在这里插入图片描述