Tumbling effect is very good, the code is also very simple, here is not much nonsense.
Copy Code code as follows:
Style file:
<style type= "Text/css" >
* {
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;
}
</style>
Head JS
Don't forget to import the jquery library.
Copy Code code as follows:
$ (function () {
var settime;
$ (". Scrollnews"). Hover (function () {
Clearinterval (settime);
}, function () {
SetTime = setinterval (function () {
var $first = $ (". Scrollnews Ul:first"); Select the first UL under Div instead of Li;
var height = $first. Find ("Li:first"). Height (); Get the height of the first Li, prepare for the UL move up;
$first. Animate ({"margintop":-height + "px"}, the function () {
$first. css ({margintop:0}). Find ("Li:first"). Appendto ($first); Set the top margin to zero to prepare for the next move
});
}, 3000);
}). Trigger ("MouseLeave"); The trigger () method is used to trigger the Set event type of the selected element
});
JSP Body Area
Copy Code code as follows:
<div class= "Scrollnews" >
<ul>
<li><a class= "tooltip" title= Query Module menu name Update Bulletin: Starting from 2015-02-09, the Query module menu uses the new name, please refer to the "Query module new and old name comparison table" below. >
Query Module Menu name Update Bulletin: Starting from 2015-02-09, the Query module menu using the new name, please refer to the "Query module new and old name comparison table" .</a>
</li>
<li><a class= "tooltip" title= Query Module menu name Update Bulletin: Starting from 2015-02-09, the Query module menu uses the new name, please refer to the "Query module new and old name comparison table" below. >
Query Module Menu name Update Bulletin: Starting from 2015-02-09, the Query module menu using the new name, please refer to the "Query module new and old name comparison table" .</a>
</li>
</ul>
</div>
Small partners are free to play, apply to their own projects
