Online Demo: http://demo.jb51.net/js/2012/callboard/
jquery Code
Copy Code code as follows:
Second Edition: Newton transformation
(function (Win) {
var Callboartimer;
var Callboard = $ (' #callboard ');
var Callboardul = callboard.find (' ul ');
var callboardli = callboard.find (' li ');
var Lilen = callboard.find (' li '). length;
var initheight = Callboardli.first (). Outerheight (True);
Win.autoanimation = function () {
if (Lilen <= 1) return;
var self = Arguments.callee;
var callboardlifirst = callboard.find (' li ').
Callboardlifirst.animate ({
Margintop:-initheight
}, 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 Code code as follows:
<div id= "Callboard" >
<ul>
<li>
<a href= "http://www.qianduanzu.com/2012042036.html" > Bulletin: Front-End group topics are being sorted. Need to use a friend please leave a message, to facilitate timely notice! </a>
</li>
<li>
<span style= "color:red;" > Bulletin: Front-End group online one months 08 days, PR rose to 3,BD weight 1</span>
</li>
</ul>
CSS code: (can be set according to requirements)
Copy Code code as follows:
#callboard {height:24px; line-height:24px; overflow:hidden;}
#callboard ul {padding:0;}
#callboard li {padding:0;}
Full Demo Code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Scrolling bulletin Boards </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;}
/* Bulletin Bar scrolling css*/
#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>
<body>
<div id= "Callboard" >
<ul>
<li>
<span style= "color:red;" > Bulletin [2]: Front-End group online one months 08 days, PR rose to 3,BD weight 1</span>
</li>
<li>
<span style= "color:red;" > Bulletin [3]: The Bloggerads, because the income is too little, open speed slow! </span>
</li>
<li style= "margin-top:0px;" >
<a href= "http://www.jb51.net" > Bulletin [1]: Front-End group topics are being sorted. Need to use a friend please leave a message, to facilitate timely notice! </a>
</li>
</ul>
</div>
<!--bulletin board rolling-->
<script type= "Text/javascript" >
(function (Win) {
var Callboartimer;
var Callboard = $ (' #callboard ');
var Callboardul = callboard.find (' ul ');
var callboardli = callboard.find (' li ');
var Lilen = callboard.find (' li '). length;
var initheight = Callboardli.first (). Outerheight (True);
Win.autoanimation = function () {
if (Lilen <= 1) return;
var self = Arguments.callee;
var callboardlifirst = callboard.find (' li ').
Callboardlifirst.animate ({
Margintop:-initheight
}, 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>