JS realizes the scrolling effect of announcement online

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

Recommend

Detailed explanation of building Nginx website server based on centos7 (including configuration of virtual web host)

1. Nginx service foundation Nginx (engine x) is d...

JavaScript ES6 Module Detailed Explanation

Table of contents 0. What is Module 1.Module load...

How to configure jdk environment under Linux

1. Go to the official website to download the jdk...

The difference between MySQL execute, executeUpdate and executeQuery

The differences among execute, executeUpdate, and...

Detailed explanation of MySQL master-slave inconsistency and solutions

1. MySQL master-slave asynchrony 1.1 Network Dela...

MySQL tutorial data definition language DDL example detailed explanation

Table of contents 1. Introduction to the basic fu...

Create a code example of zabbix monitoring system based on Dockerfile

Use the for loop to import the zabbix image into ...

Vue practice of preventing multiple clicks

Generally, click events will be divided into diff...

A complete list of common Linux system commands for beginners

Learning Linux commands is the biggest obstacle f...

Some things to note about varchar type in Mysql

Storage rules for varchar In versions below 4.0, ...

Detailed explanation of Django+Vue+Docker to build an interface testing platform

1. Two words at the beginning Hello everyone, my ...

Detailed examples of converting rows to columns and columns to rows in MySQL

mysql row to column, column to row The sentence i...

Beginners learn some HTML tags (2)

Related article: Beginners learn some HTML tags (1...

Installation tutorial of MySQL 5.7.17 zip package version under win10

The installation tutorial of mysql5.7.17 is share...

MySQL learning summary: a preliminary understanding of the architectural design of the InnoDB storage engine

1. Storage Engine In the last section, we mention...