jquery implements announcement scrolling effect

The rolling effect is very good and the code is very simple, so there won’t be much nonsense here.

Copy code The code is as follows: //Style file: * { margin: 0; padding: 0; } .scrollNews { width: 100%; Height: 20px; overflow: hidden; background: #FFFFFF; Border: 0px solid #AAAAAA; } .scrollNews ul { padding: 2px 5px 5px 25px; } .scrollNews ul li { Height: 20px; list-style-type: none; font-size: small; } a { text-decoration: none; } Header js

Don’t forget to import the jquery library

Copy code The code is as follows: $(function () { var settime; $(".scrollNews").hover(function () { Clearinterval (settime); }, function () { settime = setInterval(function () { Var $ first = $ (". Scrollnews ul: first"); // Select the first ul under the div instead of li; var height = $first.find("li:first").height(); // Get the height of the first li and prepare for the ul to move upward; $first.animate({ "marginTop": -height "px" }, 600, function () { $ First.css ({margintop: 0}). Find ("li: first"). }); }, 3000); }). Trigger ("mouseLeave"); // trigger () method of the trigger () method is to trigger the type of events of the selected element });

jsp text area

Copy code The code is as follows: Query module menu name update announcement: Starting from 2015-02-09, the query module menu uses a new name. For details, please refer to the [New and old name comparison table of query module] below. Query module menu name update announcement: Starting from 2015-02-09, the query module menu uses a new name. For details, please refer to the [New and old name comparison table of query module] below.

Friends, feel free to use it in your own projects

jquery implements announcement scrolling effect_jquery