啦啦啦免费高清在线影院,亚洲视频在线免费,四虎影视久久久

本文實例為大家分享了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>