原生js实现消息上下滚动效果代码-html代码-BFW代码库

原生js实现消息上下滚动效果代码

代码语言：html

代码描述：原生js实现消息上下滚动效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style>
        * {
      margin: 0;
      padding: 0;
    }
    html,
    body {
    	min-width: 100%;
    	min-height: 100vh;
    	background-color: #2A2A2A;
    }
    body {
      position: relative;
    }
    .box {
    	width: 900px;
    	height: 50px;
    	background-color: cadetblue;
    	position: absolute;
    	top: 0;
    	right: 0;
    	bottom: 0;
    	left: 0;
    	margin: auto;
    	overflow: hidden;
    	color: #fff;
    	border-radius: 5px;
    }
    .box ul {
      position: absolute;
      top: 0;
      left: 0;
    }
    .box ul li {
      line-height: 50px;
      list-style: none;
      padding: 0 30px;
      box-sizing: border-box;
      cursor: pointer;
    }
    </style>
</head>

<body>
    <div class="box">
        <ul>

        </ul>
    </div>

    <script>
        //消息内容，可以任意长度
    let arr = ["消息1 : 2006年1月John Resig等人创建了jQuery", "消息2 : 2007年7月，jQuery 1.1.3版发布", "消息3 : 2008年5月，jQuery 1.2.6版发布", "消息4 : 2010年1月，也是jQuery的四周年生日"];
    
    var settings = {
      speeds: 10, //滚动的速度,单位ms
      isPause: true, //滚动后每个消息是否需要暂停，true和false,
      isHover:true, //鼠标悬停是否需要暂停
    };
    //声明timeout，用于后面清楚timeout事件
    var timeout = null;
    var ul = document.querySelector("ul");
    //渲染数据
    arr.forEach((item) => {
      var li = document.createElement("li");
      li.innerHTML = item;
      ul.appendChild(li);
    });
    //获取当前滚动的高度，支持ie请自行使用currentStyle
    va.........完整代码请登录后点击上方下载按钮下载查看