10 lines of js code to achieve up and down scrolling announcement effect

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 who need it can follow Let’s take a look with the editor. Hope it helps everyone.

Requirements

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

Solution

1. HTML

Build first A p layer serves as the announcement display area, which wraps 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

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

 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. Realize the scrolling effect;

Knowledge points:

1. animate callback function 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 encapsulated function

First introduce the jQuery library and your own encapsulating plug-in

Use the timer setInterval To control the time interval for displaying announcement information, in this case it 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>

If you think it is good, hurry up and save it.

Related recommendations:

Detailed explanation of jQuery animation and special effects

What is the js special effects mask layer

JavaScript implements the production of special effects for selected boxes

The above is the detailed content of 10 lines of js code to achieve up and down scrolling announcement effect. For more information, please follow other related articles on the PHP Chinese website!