会员
周边
众包
新闻
博问
闪存
所有博客
当前博客
我的博客
我的园子
账号设置
简洁模式
...
退出登录
注册
登录
我本无名
菩提本无树,明镜亦非台。本来无一物,何处惹尘埃。
博客园
首页
博问
闪存
新随笔
订阅
管理
javascript特效,信息滚动效果
javascript特效,信息滚动效果一次滚动一条信息,相隔一秒后,再滚动另一条信息。上下滚动。
<
table width
=
"
50%
"
border
=
"
1
"
>
<
tr
>
<
td height
=
"
18
"
>
<
script
>
var
marqueeContent
=
new
Array();
//
定义一个数组,用来存放显示内容
marqueeContent[
0
]
=
'
<A href="#" onclick="reinitMarquee()">刷新最新列表</FONT></A>
'
;
marqueeContent[
1
]
=
'
<a href=http://www.blueidea.com/updatelist.asp target=_blank>站点最新更新六十条</a>
'
;
marqueeContent[
2
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/875.asp target=_blank>羽毛效果制作教程</a>
'
;
marqueeContent[
3
]
=
'
<A href=http://www.blueidea.com/tech/program/2003/831.asp target=_blank>MySQL&ASP</a>
'
;
marqueeContent[
4
]
=
'
<A href=http://www.blueidea.com/tech/web/2003/874.asp target=_blank>初步了解CSS3</a>
'
;
marqueeContent[
5
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/864.asp target=_blank>Fireworks MX 2004执行面版操作</a>
'
;
marqueeContent[
6
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/872.asp target=_blank>Fireworks MX 2004等高渐变填充</a>
'
;
marqueeContent[
7
]
=
'
<A href=http://www.blueidea.com/photo/gallery/2003/873.asp target=_blank>瓶子里的花</a>
'
;
marqueeContent[
8
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/871.asp target=_blank>Fireworks MX 实现选项卡式效果</a>
'
;
marqueeContent[
9
]
=
'
<A href=http://www.blueidea.com/photo/gallery/2003/870.asp target=_blank>情侣:黑白的爱情空气</a>
'
;
marqueeContent[
10
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/866.asp target=_blank>制作 MAC 风格的苹果标志</a>
'
;
marqueeContent[
11
]
=
'
<A href=http://www.blueidea.com/tech/graph/2003/868.asp target=_blank>蛋壳制作及破壳而出的人物合成</a>
'
;
var
marqueeInterval
=
new
Array();
//
定义一些常用而且要经常用到的变量
var
marqueeId
=
0
;
var
marqueeDelay
=
4000
;
var
marqueeHeight
=
18
;
//
接下来的是定义一些要使用到的函数
Array.prototype.random
=
function
()
{
var
a
=
this
;
var
l
=
a.length;
for
(
var
i
=
0
;i
<
l;i
++
)
{
var
r
=
Math.floor(Math.random()
*
(l
-
i));
a
=
a.slice(
0
,r).concat(a.slice(r
+
1
)).concat(a[r]);
}
return
a;
}
function
initMarquee()
{
marqueeContent
=
marqueeContent.random();
var
str
=
''
;
for
(
var
i
=
0
;i
<
Math.min(
3
,marqueeContent.length);i
++
) str
+=
(i
>
0
?
'
'
:
''
)
+
marqueeContent[i];
document.write(
'
<div id=marqueeBox style="overflow:hidden;height:
'
+
marqueeHeight
+
'
px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval(
'
startMarquee()
'
,marqueeDelay)"><div>
'
+
str
+
'
</div></div>
'
);
marqueeId
+=
2
;
if
(marqueeContent.length
>
3
)marqueeInterval[
0
]
=
setInterval(
"
startMarquee()
"
,marqueeDelay);
}
function
reinitMarquee()
{
js_scroll_content.src
=
'
scroll_content2.js
'
;
marqueeContent
=
marqueeContent.random();
var
str
=
''
;
for
(
var
i
=
0
;i
<
Math.min(
3
,marqueeContent.length);i
++
) str
+=
(i
>
0
?
'
'
:
''
)
+
marqueeContent[i];
marqueeBox.childNodes[(marqueeBox.childNodes.length
==
1
?
0
:
1
)].innerHTML
=
str;
marqueeId
=
2
;
}
function
startMarquee()
{
var
str
=
''
;
for
(
var
i
=
0
;(i
<
3
)
&&
(marqueeId
+
i
<
marqueeContent.length);i
++
)
{
str
+=
(i
>
0
?
'
'
:
''
)
+
marqueeContent[marqueeId
+
i];
}
marqueeId
+=
3
;
if
(marqueeId
>
marqueeContent.length)marqueeId
=
0
;
if
(marqueeBox.childNodes.length
==
1
)
{
var
nextLine
=
document.createElement(
'
DIV
'
);
nextLine.innerHTML
=
str;
marqueeBox.appendChild(nextLine);
}
else
{
marqueeBox.childNodes[
0
].innerHTML
=
str;
marqueeBox.appendChild(marqueeBox.childNodes[
0
]);
marqueeBox.scrollTop
=
0
;
}
clearInterval(marqueeInterval[
1
]);
marqueeInterval[
1
]
=
setInterval(
"
scrollMarquee()
"
,
20
);
}
function
scrollMarquee()
{
marqueeBox.scrollTop
++
;
if
(marqueeBox.scrollTop
%
marqueeHeight
==
(marqueeHeight
-
1
))
{
clearInterval(marqueeInterval[
1
]);
}
}
initMarquee();
<
/
script>
<
/
td>
<
/
tr>
<
/
table>
posted on
2008-04-22 10:42
我本无名
阅读(
937
) 评论(
0
)
编辑
收藏
举报
会员力量,点亮园子希望
刷新页面
返回顶部