JS realizes the scrolling effect of announcement online

This article shares the specific code of JS to achieve the scrolling effect of the announcement online for your reference. The specific content is as follows

The effect achieved is as follows: the news announcement scrolls up and down.

Code:

<!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 is called Hypertext Markup Language, which is a identification language. It consists of a series of tags. These tags can be used to unify the document format on the network and connect scattered Internet resources into a logical whole. </li>
   <li>JavaScript ("JS" for short) is a lightweight, interpreted or just-in-time compiled, high-level programming language with function-first approach. </li>
   <li>Cascading Style Sheets (full name: Cascading Style Sheets) is a computer language used to express the style of files such as HTML (an application of Standard Generalized Markup Language) or XML (a subset of Standard Generalized Markup Language). </li>
   <li>Node.js is a JavaScript runtime environment based on the Chrome V8 engine. Node.js uses an event-driven, non-blocking I/O model. </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>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JavaScript to achieve the effect of scrolling up and down the bulletin board
Scrolling announcement effects implemented with JavaScript [based on jQuery]
Native js to achieve announcement scrolling effect
Use 10 lines of js code to achieve the effect of scrolling up and down announcements
js seamless scrolling upwards, website announcement effect specific code

<<: Vuex implements a simple shopping cart

>>: JavaScript Html to implement the mobile red envelope rain function page