JQuery implements automatic scrolling of the List to display news in a loop _ jquery

JQuery implements automatic scrolling of the List to display news in a loop. When you hover your mouse over the list, it stops scrolling and prompts you to continue scrolling. The implementation code is as follows, if you need it, you can view the News (announcements, activities, images, etc.) in a small area on the page. When you hover your mouse over the page, stop scrolling and prompt you to exit, continue rolling.

:

Dry Loading

Html:

The Code is as follows:

• Aaaaaaaaaaaaaaa


• Bbbbbbbbbbbbbbbbb


• Ccccccccccccc


• Ddddddddddddd


• Eeeeeeeeeeeeeee


• Fffffffffffff


• Ggggggggggggggg

Css:

The Code is as follows:

Ui, li {
List-style: none;
}
# News {
Height: 75px;
Overflow: hidden;
}

The key is the js file:

The Code is as follows:

$ (Function (){
Var $ this = $ ("# news ");
Var scrollTimer;
$ This. hover (function (){
ClearInterval (scrollTimer );
}, Function (){
ScrollTimer = setInterval (function (){
ScrollNews ($ this );
},2000 );
}). Trigger ("mouseleave ");

Function scrollNews (obj ){
Var $ self = obj. find ("ul ");
Var lineHeight = $ self. find ("li: first"). height ();
$ Self. animate ({
"MarginTop":-lineHeight + "px"
},600, function (){
$Self.css ({
MarginTop: 0
}). Find ("li: first"). appendTo ($ self );
})
}
})

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.