Use 10 line JS code to scroll up and down the announcement effect

Solution Solutions

1. HTML

First build a DIV layer as the announcement display area, which wraps an announcement list (UL);

<div class= "notice" > <ul> <li> 1th Bulletin 1th article 1th article 1th notice 1th notice 1th article announcement </li> <li> 2nd Notice 2nd Article 2nd Article 2nd notice 2nd notice 2nd notice </li> <li> 3rd Notice 3rd Notice 3rd Notice 3rd Article 3rd notice 3rd notice </li> <li> 4th Notice 4th Article 4th Article 4th notice 4th notice 4th notice </li> </ul></div>

2. CSS

Fixed bulletin board display area height (35px), the height of each announcement information (LI) must also be this height (I am lazy here to use the line height), the following JS in the use of this value.

div,ul,li{margin:0;padding:0}/* First initialize the default style */.notice {width:300px;/* single-line display, out of hidden */height:35px;/* fixed Bulletin bar display area of the height */ Padding:0 30px; Background-color: #b3effe; Overflow:hidden;}. Notice ul li {list-style:none; line-height:35px;/* below for single-line display, out of hidden */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 The function to execute after the animate function finishes executing.

2. AppendTo () method

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

Note: The specified content is some element in the current page, then these elements will disappear from the original position. In short, this is equivalent to a move operation, not a copy operation.

/** parameter Description * obj: The node of the animation, in this case the ul* top: The height of the animation, in this case the -35px; Notice that scrolling up is a negative number * time: The speed of the animation, which is 500 milliseconds to complete the animation, in this case, That is, margintop from 0 to -35px takes 500 milliseconds * Function: callback function, each time the animation is completed, margintop to zero, and add the first message at this time to the list at the end; * */function Noticeup (obj,top,time) { $ (obj). Animate ({margintop:top}, time, function () {$ (this). CSS ({margintop: "0"}). Find (": First"). AppendTo (this);})}

4. Call of encapsulation function

First introduce the jquery library and your own encapsulation plugin

Use timer setinterval to control the time interval at which the announcement information is displayed, in this case 2000 milliseconds

<script src= "Https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js" ></script><script src= " Noticeup.js "></script> <script> $ (function () {//Call post SetInterval (" Noticeup ('. Notice ul ', ' -35px '), 500) ", 2000); });</script>

More scrolling announcement methods:

http://www.jiuaidushu.com/search?q=ABP-176

Use 10 line JS code to scroll up and down the announcement effect