热点新闻滚动特效的js代码_Javascript教程-查字典教程网
热点新闻滚动特效的js代码
热点新闻滚动特效的js代码
发布时间:2016-12-30 来源:查字典编辑
摘要:复制代码代码如下:热点新闻滚动滚动新闻varmarqueeContent=newArray();marqueeContent[0]="查字典...

复制代码 代码如下:

<!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=gb2312" />

<title>热点新闻滚动</title>

<style type="text/css">

<>

</style>

</head>

<body>

<h4>滚动新闻</h4>

<script language="JavaScript" type="text/javascript">

var marqueeContent=new Array();

marqueeContent[0]="<a href='http://www.jb51.net' target='_blank'>查字典教程网</a>";

marqueeContent[1]="<a href='http://play.jb51.net' target='_blank'>播放器之家</a>";

marqueeContent[2]="<a href='http://sc.jb51.net' target='_blank'>素材之家</a>";

marqueeContent[3]="<a href='http://mingzi.jb51.net' target='_blank'>个性名字网</a>";

var marqueeInterval=new Array();

var marqueeId=0;

var marqueeDelay=2000;

var marqueeHeight=20;

function initMarquee() {

var str=marqueeContent[0];

document.write('<div id="marqueeBox"+marqueeHeight+'px" onmouseover="clearInterval(marqueeInterval[0])" onmouseout="marqueeInterval[0]=setInterval('startMarquee()',marqueeDelay)"><div>'+str+'</div></div>');

marqueeId++;

marqueeInterval[0]=setInterval("startMarquee()",marqueeDelay);

}

function startMarquee() {

var str=marqueeContent[marqueeId];

marqueeId++;

if(marqueeId>=marqueeContent.length) marqueeId=0;

if(document.getElementById("marqueeBox").childNodes.length==1) {

var nextLine=document.createElement('DIV');

nextLine.innerHTML=str;

document.getElementById("marqueeBox").appendChild(nextLine);

}

else {

document.getElementById("marqueeBox").childNodes[0].innerHTML=str;

document.getElementById("marqueeBox").appendChild(document.getElementById("marqueeBox").childNodes[0]);

document.getElementById("marqueeBox").scrollTop=0;

}

clearInterval(marqueeInterval[1]);

marqueeInterval[1]=setInterval("scrollMarquee()",20);

}

function scrollMarquee() {

document.getElementById("marqueeBox").scrollTop++;

if(document.getElementById("marqueeBox").scrollTop%marqueeHeight==(marqueeHeight-1)){

clearInterval(marqueeInterval[1]);

}

}

initMarquee();

</script>

</body>

</html></td>

</tr>

</table>

相关阅读
推荐文章
猜你喜欢
附近的人在看
推荐阅读
拓展阅读
  • 大家都在看
  • 小编推荐
  • 猜你喜欢
  • 最新Javascript教程学习
    热门Javascript教程学习
    编程开发子分类