JS实现公告上线滚动效果

本文实例为大家分享了JS实现公告上线滚动效果的具体代码，供大家参考，具体内容如下

实现的效果如下，新闻公告上下滚动。

代码：

!DOCTYPE htML>
    html lang="en">
    head>
     meta charset="UTF-8">
     meta name="viewport" content="width=device-width, inITial-scale=1.0">
     meta http-equiv="X-UA-Compatible" content="ie=Edge">
     script type="text/javascript" src="http://ajax.aspnetcdn.COM/ajax/jquery/jquery-3.1.0.min.js">
    /script>
     script src="./l-by-l.min.js">
    /script>
     title>
    Document/title>
     style>
  * {
       padding: 0;
       margin: 0;
       box-sizing: border-box;
  }
  .notice-news {
       width: 400px;
       height: 30px;
       background-color: #fff;
       border: 1px solid #ccc;
       margin: 20px;
       border-radius: 8px;
       display: flex;
       align-items: center;
       padding: 0 10px;
       overflow: hidden;
  }
  .hron-voice {
       width: 16px;
       height: 16px;
       background-image: url('./horn.png');
       background-repeat: no-repeat;
       background-size: 100% 100%;
  }
  .news-list {
       list-style: none;
       width: 320px;
       height: 18px;
       font-Size: 12px;
       margin-left: 10px;
       overflow: hidden;
       /* transition: all .5s linear;
 */  }
  .news-list li {
       width: 100%;
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
  }
       /style>
    /head>
    body>
     div class="notice-news">
      div class="hron-voice">
    /div>
      ul class="news-list">
       li>
    HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的internet资源连接为一个逻辑整体。/li>
       li>
    JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型或即时编译型的高级编程语言。/li>
       li>
    层叠样式表(英文全称：CasCADing Style Sheets)是一种用来表现HTML（标准通用标记语言的一个应用）或XML（标准通用标记语言的一个子集）等文件样式的计算机语言。/li>
       li>
    Node.js 是一个基于 Chrome V8 引擎的 JavaScript 运行环境。 Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型。/li>
      /ul>
     /div>
    /body>
    script type="text/javascript">
 $(function () {
  setInterval(function () {
   $('.news-list').aniMATE({
    marginTop: '-50px'   }
, 2000, function () {
    $(this).css({
 marginTop: "0px" }
    );
        VAR li = $(".news-list").children().First().clone()    $(".news-list li:last").after(li);
        $(".news-list li:first").remove();
   }
)  }
, 3000) }
    )/script>
    /html>
    

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

• JavaScript实现公告栏上下滚动效果
• JavaScript实现的滚动公告特效【基于jQuery】
• 原生js实现公告滚动效果
• 利用10行js代码实现上下滚动公告效果
• js向上无缝滚动,网站公告效果 具体代码

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！