<!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
>JS新闻公告文字逐条向上翻滚代码
</
title
>
<
style
type=
"text/css"
>
#rollText {
font:
12px /
20px
verdana;
}
<
/
style
>
</
head
>
<
body
>
<
div
id=
"rollAD"
style=
"height:20px; position:absolute; width:100%; margin:10px 0 0;overflow:hidden;"
>
<
img
style=
'width:20px;height:20px;padding:0 20px;'
src=
"http://pic.qiantucdn.com/10/81/45/27bOOOPICc1.jpg!/fw/300/clip/0x400a0a0/format/webp"
>
<
div
id=
"rollText"
style=
"font-size:12px;line-height:20px;color:#666;"
>
<
a
>第一条公告广告
</
a
>
<
br
/>
<
a
>第二条公告广告
</
a
>
<
br
/>
<
a
>第三条公告广告
</
a
>
<
br
/>
</
div
>
</
div
>
<
script
type=
"text/javascript"
>
// <![CDATA[
var
textDiv =
document.
getElementById(
"rollText");
var
textList =
textDiv.
getElementsByTagName(
"a");
if (
textList.
length >
1) {
var
textDat =
textDiv.
innerHTML;
var
br =
textDat.
toLowerCase().
indexOf(
"<br",
3);
//var textUp2 = textDat.substr(0,br);
textDiv.
innerHTML =
textDat +
textDat.
substr(
0,
br);
textDiv.
style.
cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
var
textDatH =
textDiv.
offsetHeight;
MaxRoll();
}
else {
textDiv.
style.
cssText =
"position:absolute;left:50px;right:50px;top:0;text-align:center;";
}
var
minTime,
maxTime,
divTop,
newTop =
0;
function
MinRoll() {
newTop++;
if (
newTop <=
divTop +
20) {
textDiv.
style.
top =
"-" +
newTop +
"px";
}
else {
clearInterval(
minTime);
maxTime =
setTimeout(
MaxRoll,
2000);
}
}
function
MaxRoll() {
divTop =
Math.
abs(
parseInt(
textDiv.
style.
top));
if (
divTop >=
0 &&
divTop <
textDatH -
20) {
minTime =
setInterval(
MinRoll,
1);
}
else {
textDiv.
style.
top =
0;
divTop =
0;
newTop =
0;
MaxRoll();
}
}
// ]]>
<
/
script
>
</
body
>
</
html
>