<script type="text/javascript">
var marqueeContent=new Array(); //滚动新闻的内容
marqueeContent[0]='14:25 <a href=http://www.blueidea.com/updatelist.asp
target=_blank class="f12red">新闻0:小泉称若……</a><br>';
marqueeContent[1]='14:25 <a href=http://www.blueidea.com/updatelist.asp
target=_blank class="f12red">新闻1:布什发表广播讲话</a><br>';
marqueeContent[2]='14:25 <a href=http://www.blueidea.com/updatelist.asp
target=_blank class="f12red">新闻2:伊斯兰武装……</a><br>';
marqueeContent[3]='14:25 <a href=http://www.blueidea.com/updatelist.asp
target=_blank class="f12red">新闻3:布雷默:即使……</a><br>';
var marqueeInterval=new Array(); //定义一些常用而且要经常用到的变量
var marqueeId=0;
var marqueeDelay=2000;
var marqueeHeight=20;
var marqueeBox;//用来存放滚动新闻的容器元素
//接下来的是定义一些要使用到的函数
//1.初始化滚动新闻
function initMarquee() {
//初始化str为新闻0
var str=marqueeContent[0];
//写HTML
document.write('<div id="marqueeBox" style="overflow:hidden;height:'
+marqueeHeight+'px" οnmοuseοver="clearInterval(marqueeInterval[0])"
οnmοuseοut="marqueeInterval[0]=setInterval(/'startMarquee()/',marqueeDelay)"><div>'
+str+'</div></div>');
//用于切换新闻内容到1
marqueeId++;
//2.定期调用startMarquee,存于marqueeInterval[0]中
marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);
}
//2.开始滚动新闻
function startMarquee(){
marqueeBox = document.getElementById("marqueeBox");
//更新新闻内容到str
var str=marqueeContent[marqueeId];
//新闻切换
marqueeId++;
//切换到头则返回新闻0
if(marqueeId>=marqueeContent.length) marqueeId=0;
//如果marqueeBox只有一个子结点(第一次运行这个函数的时候是true)
if(marqueeBox.childNodes.length==1) {
//创建一个div并且将其内容设置为str
var nextLine=document.createElement('DIV');
nextLine.innerHTML=str;
marqueeBox.appendChild(nextLine);
} else {//否则的话,(第一次运行本函数之后都运行这个分支)
marqueeBox.childNodes[0].innerHTML=str;
//重点语句,将第一个元素颠倒到第二个
marqueeBox.appendChild(marqueeBox.childNodes[0]);
//让元素看起来像滚动的效果,初始为0
marqueeBox.scrollTop=0;
}
//3.滚动效果、20毫秒延时
clearInterval(marqueeInterval[1]);
marqueeInterval[1]=setInterval("scrollMarquee()",20);
}
//3.滚动效果
function scrollMarquee(){
//开始滚动。
marqueeBox.scrollTop++;
//如果滚到头了,停止滚动
if(marqueeBox.scrollTop%marqueeHeight==(marqueeHeight-1)){
clearInterval(marqueeInterval[1]);
}
}
//1.代码开始
initMarquee();
</script>
js滚动新闻实例
最新推荐文章于 2023-03-28 11:22:56 发布