Online Demo: http://demo.jb51.net/js/2012/callboard/
JQuery code
Copy codeThe 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:
Copy codeThe Code is as follows:
<Div id = "callboard">
<Ul>
<Li>
<A href = "http://www.qianduanzu.com/2012042036.html"> announcement: front-end group topics are being organized... friends who need to use please leave a message to facilitate timely notice! </A>
</Li>
<Li>
<Span style = "color: red;"> announcement: the front-end group is available for one month and eight days, the PR is upgraded to 3, and the BD weight is 1 </span>
</Li>
</Ul>
CSS Code: (you can set it as needed)
Copy codeThe Code is as follows:
# Callboard {height: 24px; line-height: 24px; overflow: hidden ;}
# Callboard ul {padding: 0 ;}
# Callboard li {padding: 0 ;}
Complete DEMO code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> rolling announcement board </title>
<Style type = "text/css">
Header, nav, aside, menu, figure, article, footer {display: block ;}
Body, div, form, textarea, label, input, ul, ol, li, dl, dt, dd, p, span, a, img, h1, h2, h3, h4, h5, h6, tbody, tfoot, tr, th, td, pre, code, form, fieldset, legend, font {margin: 0; padding: 0 ;}
Table {border-collapse: collapse; border-spacing: 0 ;}
Caption, th {text-align: left ;}
Sup {vertical-align: text-top ;}
Sub {vertical-align: text-bottom ;}
Li {list-style: none ;}
Fieldset, img {border: none ;}
Input, textarea, select {font-family: inherit; font-size: inherit; font-weight: inherit; * font-size: 100%;
Color: inherit; _ color: #333; * color: #333;
Outline: none ;}
/* Base class */
. Cfix {* display: inline-block; * zoom: 1}
. Cfix: after {content: "."; display: block; height: 0; clear: both; visibility: hidden ;}
/* Scroll CSS on the Bulletin Board */
# Callboard {width: 600px; margin: 100px auto 0; height: 24px; line-height: 24px; overflow: hidden; font-size: 12px; background-color: # f5f5f5 ;}
# Callboard ul {padding: 0 ;}
# Callboard li {padding: 0 ;}
</Style>
<Script type = "text/javascript" src = "http://demo.jb51.net/jslib/jquery/jquery-1.7.2.min.js"> </script>
</Head>
<Body>
<Div id = "callboard">
<Ul>
<Li>
<Span style = "color: red;"> Announcement [2]: The frontend group goes online for one month or eight days, PR is upgraded to 3, and BD weight is 1 </span>
</Li>
<Li>
<Span style = "color: red;"> Announcement [3]: removed BloggerAds because the revenue is too small and the open speed is slow! </Span>
</Li>
<Li style = "margin-top: 0px;">
<A href = "http://www.jb51.net"> Announcement [1]: front-end group topics are being organized... friends who need to use please leave a message to facilitate timely notice! </A>
</Li>
</Ul>
</Div>
<! -- Announcement board rolling -->
<Script type = "text/javascript">
(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 );
</Script>
</Body>
</Html>