快捷導(dǎo)航

JS實(shí)現(xiàn)公告上線滾動(dòng)效果

更新時(shí)間：2021年01月10日 10:01:58 作者：Jeslie-He

這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)公告上線滾動(dòng)效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了JS實(shí)現(xiàn)公告上線滾動(dòng)效果的具體代碼，供大家參考，具體內(nèi)容如下

實(shí)現(xiàn)的效果如下，新聞公告上下滾動(dòng)。

代碼：

<!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稱為超文本標(biāo)記語(yǔ)言，是一種標(biāo)識(shí)性的語(yǔ)言。它包括一系列標(biāo)簽．通過(guò)這些標(biāo)簽可以將網(wǎng)絡(luò)上的文檔格式統(tǒng)一，使分散的Internet資源連接為一個(gè)邏輯整體。</li>
   <li>JavaScript（簡(jiǎn)稱“JS”） 是一種具有函數(shù)優(yōu)先的輕量級(jí)，解釋型或即時(shí)編譯型的高級(jí)編程語(yǔ)言。</li>
   <li>層疊樣式表(英文全稱：Cascading Style Sheets)是一種用來(lái)表現(xiàn)HTML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)應(yīng)用）或XML（標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言的一個(gè)子集）等文件樣式的計(jì)算機(jī)語(yǔ)言。</li>
   <li>Node.js 是一個(gè)基于 Chrome V8 引擎的 JavaScript 運(yùn)行環(huán)境。 Node.js 使用了一個(gè)事件驅(qū)動(dòng)、非阻塞式 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>

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: