JQuery implements automatic list scrolling

You need to display News (announcements, activities, images, and so on) cyclically in a small area on the page. When you hover the mouse over the page, the scroll stops and the prompt is displayed. When you leave the page, the scroll continues.

:

Dry Loading

Html:

Aaaaaaaaaaaaaaa bbbbbbbbbbbbbbb ccccccccccccc ddddddddddddddd eeeeeeeeeeeeeee fffffffffffffff ggggggggggggggg

Css:

{:;}{:;:;}

The key is the js file:

$ ($ = $ ("# News ". hover (= setInterval (2000 "mouseleave" $ self = obj. find ("ul" lineHeight = $ self. find ("li: first" "marginTop":-lineHeight + "px" 600, 0 "li: first"

It mainly involves understanding and using hover, setInterval, clearInterval, animate, And the marginTop attributes (marginLeft, top, left, and so on). Note that if this attribute is not added. trigger ("mouseleave"), the list does not scroll during page initialization, and appendTo can directly move elements.