Before doing the project, I always wanted to make an up and down scroll bulletin board to display the latest announcement information of the website. At the beginning, I didn't have a clear idea. I found a lot of source code on the Internet, but I found that I couldn't satisfy myself. Some of them still had some small problems. For example, sometimes when the announcement scrolled up and down, the two announcements would be heavy Fold them together. In the end, I decided to write a scroll up and down bulletin board.
The principle of scrolling up and down bulletin board with jQuery
Although some codes found on the internet sometimes have some problems, we can learn from them.
Let's take a look first. I've made a picture of scrolling up and down the bulletin board. If you think it's the one you want, then you can go on to see how it's realized.
The content indicated by the arrow in the figure is the announcement content. It will continuously scroll up and down. Of course, the scrolling time can be set by itself.
Let's take a look at how it is realized.
In fact, the implementation of rolling effect mainly uses the animate() method in jQuery, and the animate() method is to create animation effect. In short, when we use js to change the height attribute of "a tree" from 100px to 200px, we will see that "this tree" grows from 100px to 200px, but we use the animate() method, we will see that "this tree" grows from 1 We can see the process from 00 to 200, which is the function of animate() method. Of course, the growth speed of "tree" can be controlled.
After learning about jQuery's animate() method, we need to know about setInterval(). Maybe many students know about this method, because it is a simple timing function. Let's take a look at its usage
setInterval(function(){ alert("Hello"); }, 3000);
This code is to execute the method every 3 seconds and pop up a "hello".
OK, after understanding the first two methods, you can see and understand the following code.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Scroll bulletin board</title> <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script> <style type="text/css"> body{padding: 0;margin:0;background-color:#f9f9f9} .ul1{list-style: none;margin: 0} li{padding: 5px;} </style> </head> <body> <div style="height: 60px;background-color: #191e29;"> <p style="margin: 0;color: #fff;line-height: 60px;text-align: center;">This is used. jQuery Rolling up and down bulletin board implemented</p> </div> <div style="background-image: url(timg.jpg); margin:15px 90px 0 90px;padding-left: 310px; height: 600px;"> <div style="position: relative;height: 26px;overflow: hidden;"> <ul class="ul1"> <li>K Sir: I beg you to marry me</li> <li>K Sir: when you get old, I still carry you on my back</li> <li>K Sir: I'll be your crutch</li> <li>K Sir: when you have no teeth, I'll chew them and feed them to you</li> </ul> <img style="position: absolute;top: 9px;left: 20px" width="15px" height="15px" src="laba.png"> </div> </div> <script type="text/javascript"> $(function(){ var num=$(".ul1").find("li").length; console.log("Direct operation"+num); if (num>1) { setInterval(function(){ $('.ul1').animate({ marginTop:"-26px" },500,function(){ $(this).css({marginTop : "0"}).find("li:first").appendTo(this); }); }, 3000); } }); </script> </body> </html>
If you have better suggestions or questions, please leave a message below.
This article is from Mr K's blog (source code is available).