上下滚动 标题停留(字母,图片)

本文介绍了一种使用JavaScript实现的滚动字幕效果,通过不同层叠元素的位置变化达到连续滚动的文字展示,适用于早期网页设计中增加动态效果。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

<script language="JavaScript1.2">
//这里配置滚动字幕的属性
var scrollerwidth=350
var scrollerheight=20
var scrollerbgcolor='#ffdfd0'
var scrollerbackground='scrollerback.gif'

//修改下面的文字及文字所指向的链接
var messages=new Array()
messages[
0]="<font face='Arial'><a href='../../index.asp'>回到首页仔细看看,看看微风吹过竹叶摇动的效果</a></font>"
messages[
1]="<font face='Arial'><a href='../wytx.htm'>请到本站的网页特效区看看,这里有大量的网页特效供你选择</a></font>"
messages[
2]="<font face='Arial'><a href='../../bzlt/index.asp'>如果你在游览本站时有什么问题,请到本站的论坛发表看法</a></font>"


///////不要修改下面的内容///////////////////////

if (messages.length>1)
i
=2
else
i
=0

function move1(whichlayer)
{
tlayer
=eval(whichlayer)
if (tlayer.top>0&&tlayer.top<=5)
{
tlayer.top
=0
setTimeout(
"move1(tlayer)",3000)
setTimeout(
"move2(document.main.document.second)",3000)
return    
}
if (tlayer.top>=tlayer.document.height*-1)
{
tlayer.top
-=5
setTimeout(
"move1(tlayer)",100)
}
else
{
tlayer.top
=scrollerheight
tlayer.document.write(messages[i])
tlayer.document.close()
if (i==messages.length-1)
i
=0
else
i
++
}
}

function move2(whichlayer)
{
tlayer2
=eval(whichlayer)
if (tlayer2.top>0&&tlayer2.top<=5)
{
tlayer2.top
=0
setTimeout(
"move2(tlayer2)",3000)
setTimeout(
"move1(document.main.document.first)",3000)
return
}
if (tlayer2.top>=tlayer2.document.height*-1)
{
tlayer2.top
-=5
setTimeout(
"move2(tlayer2)",100)
}
else{
tlayer2.top
=scrollerheight
tlayer2.document.write(messages[i])
tlayer2.document.close()
if (i==messages.length-1)
i
=0
else
i
++
}
}

function move3(whichdiv)
{
tdiv
=eval(whichdiv)
if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5)
{
tdiv.style.pixelTop
=0
setTimeout(
"move3(tdiv)",3000)
setTimeout(
"move4(second2)",3000)
return
}
if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1)
{
tdiv.style.pixelTop
-=5
setTimeout(
"move3(tdiv)",100)
}
else{
tdiv.style.pixelTop
=scrollerheight
tdiv.innerHTML
=messages[i]
if (i==messages.length-1)
i
=0
else
i
++
}
}

function move4(whichdiv)
{
tdiv2
=eval(whichdiv)
if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5)
{
tdiv2.style.pixelTop
=0
setTimeout(
"move4(tdiv2)",3000)
setTimeout(
"move3(first2)",3000)
return
}
if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1)
{
tdiv2.style.pixelTop
-=5
setTimeout(
"move4(second2)",100)
}
else{
tdiv2.style.pixelTop
=scrollerheight
tdiv2.innerHTML
=messages[i]
if (i==messages.length-1)
i
=0
else
i
++
}
}

function startscroll()
{
if (document.all)
{
move3(first2)
second2.style.top
=scrollerheight
second2.style.visibility
='visible'
}
else if (document.layers)
{
document.main.visibility
='show'
move1(document.main.document.first)
document.main.document.second.top
=scrollerheight+5
document.main.document.second.visibility
='show'
}
}
window.onload
=startscroll
</script>

<ilayer id="main" width=&{scrollerwidth}; height=&{scrollerheight}; bgColor=&{scrollerbgcolor}; background=&{scrollerbackground}; visibility=hide>
<layer id="first" left=0 top=1 width=&{scrollerwidth};>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[
0])
</script>
</layer>
<layer id="second" left=0 top=0 width=&{scrollerwidth}; visibility=hide>
<script language="JavaScript1.2">
if (document.layers)
document.write(messages[
1])
</script>
</layer>
</ilayer>
<script language="JavaScript1.2">
if (document.all)
{
document.writeln(
'<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')
document.writeln(
'<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')
document.writeln(
'<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')
document.write(messages[
0])
document.writeln(
'</div>')
document.writeln(
'<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0;visibility:hidden">')
document.write(messages[
1])
document.writeln(
'</div>')
document.writeln(
'</div>')
document.writeln(
'</span>')
}
</script>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值