使用javascript进行连续滚动

continueous scrolling using javascript

本文关键字:连续 滚动 javascript 使用      更新时间:2023-09-26

<html>
<style type="text/css">
#news
{
position: relative;
box-shadow: 1px 4px 5px #aaa;
text-align: left;
padding: 5px;
line-height: 20px;
height: 235px;
background: white;
border: 1px solid #ccc;
border-radius: 15px;
background: #eee;
width: 280px;
float: right;
height: 250px;
overflow: hidden;
background-repeat: repeat;
padding: 3px;
border-radius: 15px;
}
</style>
<script type="text/javascript">
var delayTime=8
var marqueeSpeed=2
var pauseTime=1
var copySpeed=marqueeSpeed
var pauseSpeed=(pauseTime==0)? copySpeed: 0
var actualHeight=''
function ScrollMarquee()
{
if (parseInt(crossMarquee.style.top)>((actualHeight / 2)*(-1)+8))
crossMarquee.style.top=parseInt(crossMarquee.style.top)-copySpeed+"px"
else
crossMarquee.style.top=parseInt((marqueeheight - (actualHeight / 2)) / 2)+8 +"px"
}
function InitializeMarquee()
{
crossMarquee=document.getElementById("vmarquee")
crossMarquee.style.top=0
marqueeheight=document.getElementById("news").offsetHeight
actualHeight=crossMarquee.offsetHeight;
if (window.opera || navigator.userAgent.indexOf("Netscape/7")!=-1)
{
crossMarquee.style.height=marqueeheight+"px"
crossMarquee.style.overflow="scroll"
return
}
setTimeout('lefttime=setInterval("ScrollMarquee()",30)', delayTime)
}
if (window.addEventListener)
window.addEventListener("load", InitializeMarquee, false)
else if (window.attachEvent)
window.attachEvent("onload", InitializeMarquee)
else if (document.getElementById)
window.onload=InitializeMarquee
</script>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
<div id="news" onMouseover="copySpeed=pauseSpeed" onMouseout="copySpeed=marqueeSpeed">
<div id="vmarquee" style="position: absolute; width: 98%;">
<div id="copy1">
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
<div id="copy2" >
<div>h</div><br>
<div>he</div><br>
<div>hel</div><br>
<div>hell</div><br>
<div>hello</div><br>
</div>
</div>
</div>
</html>

我使用了字幕标签来连续滚动,但它不起作用。然后我使用javascript进行连续滚动,它只适用于1个div。脚本仅针对1个div运行。我更改了另一个div id并保存脚本在另一个js文件名中,但它不起作用,请帮助我完成

Marquee在大多数现代浏览器的最新版本中都有所贬值。看看这个指南,在CSS中做字幕真的很容易:http://www.hongkiat.com/blog/css-marquee/.