javascript实现轮显新闻标题链接
javascript实现轮显新闻标题链接
发布时间:2016-12-30 来源:查字典编辑
摘要:用两个div嵌套链接文字,最外面的div设置overflow:hidden,并用js动态控制它的width,实现伸展与收缩。新闻轮显的dem...

用两个div嵌套链接文字,最外面的div设置overflow:hidden,并用js动态控制它的width,实现伸展与收缩。

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

<head>

<metahttp-equiv="Content-Type"content="text/html;charset=gb2312"/>

<title>新闻轮显的demo</title>

<styletype="text/css">

a{font-size:14px}

#box{width:400px;height:20px;overflow:hidden;}

#title{color:#000;width:400px;height:20px;font-size:14px;line-height:18px;/*background-color:#FF0000*/}

</style>

<scripttype="text/javascript">

varhandle;

varhandle2;

varboxW=0;

vartitleNum=0;

functioninit(){

varnewsTitles="快乐笛子的博客|中央统战部:新社会阶层纳入中国统一战线|中俄明年将在俄远东地区举行联合反恐演|广州宾馆3小时内须将旅客信息传给公安机关|国亲将推动弹劾陈水扁案";

varnewsLinks="http://www.happyshow.org|http://news.sina.com.cn/c/2006-09-02/093410901015.shtml|http://news.sina.com.cn/c/2006-09-02/02069914065s.shtml|http://news.sina.com.cn/c/2006-09-02/043210898986.shtml|http://news.sina.com.cn/c/2006-09-02/06069915455s.shtml";

document.getElementById("box").style.width="400px";

document.getElementById("title").innerHTML="<atarget='_blank'href='"+newsLinks.split("|")[titleNum]+"'>"+newsTitles.split("|")[titleNum]+"</a>";

//setTimeout("decreaseBoxW();",1500);

titleNum++;

setInterval("innerTitle('"+newsTitles+"','"+newsLinks+"')",3100);

}

functioninnerTitle(titles,links){

vart=titles.split("|");

vara=links.split("|");

if(!t[titleNum])

titleNum=0;

document.getElementById("box").style.width="0px";

document.getElementById("title").innerHTML="<atarget='_blank'href='"+a[titleNum]+"'>"+t[titleNum]+"</a>";

handle2=setInterval("increaseBoxW()",1);//展开

titleNum++;

}

functionincreaseBoxW(){

boxW=parseInt(document.getElementById("box").style.width);

boxW=boxW+4;

if(boxW>400){

clearInterval(handle2);

document.getElementById("box").style.width="400px";

setTimeout("decreaseBoxW()",1500)

}else{

document.getElementById("box").style.width=boxW+"px";

}

}

functiondecreaseBoxW(){

handle=setInterval("decreaseBoxW2()",4)

}

functiondecreaseBoxW2(){

boxW=parseInt(document.getElementById("box").style.width);

boxW=boxW-16;

if(boxW<0){

clearInterval(handle);

document.getElementById("box").style.width="0px";

}else{

document.getElementById("box").style.width=boxW+"px";

}

}

</script>

</head>

<body>

<divid="box">

<divid="title"></div>

</div>

<scripttype="text/javascript">

init();

</script>

</body>

</html>

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