jquery Implementation List automatic scrolling loop scrolling display News _jquery

You need to scroll through a small area of the page to display news (announcements, events, pictures, and so on), and stop scrolling and prompt when you hover, and continue scrolling after you leave.

Effect Chart:

On dry Goods

Html:

Copy Code code as follows:

<div id= "News" >
<ul>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" aaaaaaaaaaaaaaa "&GT;AAAAAAAAAAAAAAA" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" bbbbbbbbbbbbbbb "&GT;BBBBBBBBBBBBBBB" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" CCCCCCCCCCCCCCC "&GT;CCCCCCCCCCCCCCC" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" ddddddddddddddd "&GT;DDDDDDDDDDDDDDD" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" eeeeeeeeeeeeeee ">eeeeeeeeeeeeeee" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" Fffffffffffffff "&GT;FFFFFFFFFFFFFFF" </a></li>
<li><a href= "#" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow" rel= "external nofollow "Rel=" external nofollow "rel=" external nofollow "rel=" external nofollow "title=" GGGGGGGGGGGGGGG "&GT;GGGGGGGGGGGGGGG" </a></li>
</ul>
</div>

Css:

Copy Code code as follows:

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

The key is JS file:

Copy Code code 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"
}, the function () {
$self. CSS ({
margintop:0
). Find ("Li:first"). Appendto ($self);
})
}
})

The main is to hover, setinterval, clearinterval, animate these methods as well as margintop attributes (MarginLeft, top, left, etc.) understanding and application, need to pay attention to, if not add. Trigger ("MouseLeave"), the list does not scroll when the page is initialized, and appendto can move elements directly, that's all.