A recent job requirement is to ask for a list that automatically scrolls up, with many rows in the table, but one row at a time, and one row per scroll. A very simple function, the code is as follows
<Divclass= "Scroll-area"> <ulclass= "List1"> <Li> <spanclass= "Phonenum">111111111</span> <spanclass= "Award">101</span> </Li> <Li> <spanclass= "Phonenum">222222222</span> <spanclass= "Award">102</span> </Li> <Li> <spanclass= "Phonenum">333333333</span> <spanclass= "Award">103</span> </Li> <Li> <spanclass= "Phonenum">444444444</span> <spanclass= "Award">104</span> </Li> </ul> </Div>
. Scroll-area{Height:40px;Overflow:Hidden;Background-color:#fff4d7;width:88%;margin:0 Auto;Border-radius:99px;}. Scroll-area>ul{margin:0;padding:0;font-size:15px;Color:#9b520b;position:relative;Top:-40px;}. Scroll-area>ul>li{padding:9px 18px;}. Scroll-area>ul>li>span{vertical-align:Sub;}. Scroll-area>ul>li. Award{float: Right;}
function Scroll (height,num) { var a = $ ('. Scroll-area>ul>li '). Slice (0, num); $ ('. Scroll-area>ul '). Animate ({top:-height*num},1000,function() {$ ('. Scroll-area>ul '). Append (a). CSS (' top ', ' 0 ');}); $ (document). Ready (function() { var interval = setinterval (function () {Scroll (' + ', 1)},3000);})
Explanation, each row height of 40px, and then the first Li to jquery variable A, do a whole UL to move 40px animation after the A variable appand to the end of the UL, and then the height of the UL to 0 (this paragraph is not animated)
I thought I would need to remove the first Li, but I would automatically pull the DOM variable or jquery variable from the original position and put it in a new position.
So now that you know this little feature, with the convenience of both Appand and prepend, those automatic Carousel scrolling page effects are much easier.
Perhaps I ignorant, I am also a novice, after all, the first time to find this feature, so down to record
Tips on the Appand () and prepend () Methods of jquery