JQuery-based announcement infinite loop rolling implementation code _ jquery

Source: Internet
Author: User
Today, I saw a small effect on the bulletin board of a website, if there are 2 announcements or more there is a rolling effect, specially organized to share with you online demonstration: http://demo.jb51.net/js/2012/callboard/
JQuery code

The Code is as follows:


// Version 2: Newton Transformation
(Function (win ){
Var callboarTimer;
Var callboard =$ ('# callboard ');
Var callboardUl = callboard. find ('ul ');
Var callboardLi = callboard. find ('lil ');
Var liLen = callboard. find ('lil'). length;
Var initHeight = callboardLi. first (). outerHeight (true );
Win. autoAnimation = function (){
If (liLen <= 1) return;
Var self = arguments. callee;
Var callboardLiFirst = callboard. find ('lil'). first ();
CallboardLiFirst. animate ({
MarginTop:-initHeight
},500, function (){
ClearTimeout (callboarTimer );
CallboardLiFirst.appendTo(callboardUl).css ({marginTop: 0 });
CallboarTimer = setTimeout (self, 5000 );
});
}
Callboard. mouseenter (
Function (){
ClearTimeout (callboarTimer );
}). Mouseleave (function (){
CallboarTimer = setTimeout (win. autoAnimation, 5000 );
});
} (Window ));
SetTimeout (window. autoAnimation, 5000 );


HTML code:

The Code is as follows:





  • Announcement: the topic of the front-end group is being organized. If you need to use it, leave a message to facilitate timely notification!


  • Announcement: the front-end group is available for one month and eight days, PR is upgraded to 3, BD weight is 1



CSS Code: (you can set it as needed)

The Code is as follows:


# Callboard {height: 24px; line-height: 24px; overflow: hidden ;}
# Callboard ul {padding: 0 ;}
# Callboard li {padding: 0 ;}


Complete DEMO code:

The Code is as follows:






Rolling announcement board

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.