溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
本篇文章為大家展示了利用JavaScript怎么實現一個公告上線滾動效果，內容簡明扼要并且容易理解，絕對能使你眼前一亮，通過這篇文章的詳細介紹希望你能有所收獲。
代碼：
<!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怎么實現一個公告上線滾動效果，你們學到知識或技能了嗎？如果還想學到更多技能或者豐富自己的知識儲備，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
