How to implement scrolling announcements up and down using js

This article mainly introduces to you the relevant information about using 10 lines of js code to achieve the rolling announcement effect. The article introduces it in detail through the example code. It has certain reference learning value for everyone's study or work. Friends in need Let’s take a look with the editor below.

Requirements

In a recent project, it is necessary to achieve the scrolling display effect of the bulletin board as follows:

Solution

1. HTML

First create a p layer as the announcement display area, inside Wrap an announcement list (ul);

<p class="notice">
 <ul>
 <li>第1条公告第1条公告第1条公告第1条公告第1条公告第1条公告</li>
 <li>第2条公告第2条公告第2条公告第2条公告第2条公告第2条公告</li>
 <li>第3条公告第3条公告第3条公告第3条公告第3条公告第3条公告</li>
 <li>第4条公告第4条公告第4条公告第4条公告第4条公告第4条公告</li>
 </ul>
</p>

2, CSS

Fixed the height of the announcement bar display area (35px), the height of each announcement message (li) It must also be this height (I am lazy here and use the row height), and this value will be used in the js later.

 p,ul,li{margin: 0;padding: 0}/*先初始化一下默认样式*/
.notice {
 width: 300px;/*单行显示，超出隐藏*/
 height: 35px;/*固定公告栏显示区域的高度*/
 padding: 0 30px;
 background-color: #b3effe;
 overflow: hidden;
}
.notice ul li {
 list-style: none;
 line-height: 35px;
 /*以下为了单行显示，超出隐藏*/
 display: block;
 white-space: nowrap;
 text-overflow: ellipsis;
 overflow: hidden;
}

3. JavaScript

Encapsulation function noticeUp.js

Use the jquery animate method to change the marginTop value of the list ul to achieve the scrolling effect;

Knowledge points:

1. animate callback function is the function to be executed after the animate function is executed.

2. appendTo() method

Insert the specified content at the end of the selected element (still inside).

Note: The specified content is certain elements in the current page, then these elements will disappear from their original positions. In short, this amounts to a move operation, not a copy operation.

/*
* 参数说明
* obj : 动画的节点，本例中是ul
* top : 动画的高度，本例中是-35px;注意向上滚动是负数
* time : 动画的速度，即完成动画所用时间，本例中是500毫秒，即marginTop从0到-35px耗时500毫秒
* function : 回调函数，每次动画完成，marginTop归零，并把此时第一条信息添加到列表最后;
* 
*/ 
function noticeUp(obj,top,time) {
 $(obj).animate({
 marginTop: top
 }, time, function () {
 $(this).css({marginTop:"0"}).find(":first").appendTo(this);
 })
}

4. Calling the encapsulation function

First introduce the jQuery library and its own encapsulation plug-in

Use the timer setInterval to control the display of announcement information The time interval, in this case is 2000 milliseconds

<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="noticeUp.js"></script>
 <script>
 $(function () {
 // 调用 公告滚动函数
 setInterval("noticeUp(&#39;.notice ul&#39;,&#39;-35px&#39;,500)", 2000);
 });
</script>

The above is what I compiled for everyone. I hope it will be helpful to everyone in the future.

Related articles:

How to use JS to realize the parabolic trajectory movement of the ball

How to implement the web version of the calculator in JS

How to remove the # sign from the URL in Angular2 (detailed tutorial)

Usage of classes, constructors, and factory functions in Javascript Method

How to use the mobile component library in Vue.js (detailed tutorial)

The above is the detailed content of How to implement scrolling announcements up and down using js. For more information, please follow other related articles on the PHP Chinese website!