javascript实现轮显新闻标题链接

用两个div嵌套链接文字，最外面的div设置 overflow:hidden，并用js动态控制它的width，实现伸展与收缩。 <!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>新闻轮显的demo</title> <style type="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> <script type="text/javascript"> var handle; var handle2; var boxW=0; var titleNum=0; function init(){ var newsTitles = "快乐笛子的博客|中央统战部：新社会阶层纳入中国统一战线|中俄明年将在俄远东地区举行联合反恐演|广州宾馆3小时内须将旅客信息传给公安机关|国亲将推动弹劾陈水扁案"; var newsLinks = "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 = "<a target='_blank' href='"+newsLinks.split("|")[titleNum]+"'>"+newsTitles.split("|")[titleNum]+"</a>"; //setTimeout("decreaseBoxW();",1500); titleNum++; setInterval("innerTitle('"+newsTitles+"','"+newsLinks+"')",3100); } function innerTitle(titles,links){ var t = titles.split("|"); var a = links.split("|"); if (!t[titleNum]) titleNum=0; document.getElementById("box").style.width = "0px"; document.getElementById("title").innerHTML = "<a target='_blank' href='"+a[titleNum]+"'>"+t[titleNum]+"</a>"; handle2 = setInterval("increaseBoxW()",1);//展开 titleNum++; } function increaseBoxW(){ 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"; } } function decreaseBoxW(){ handle = setInterval("decreaseBoxW2()",4) } function decreaseBoxW2(){ 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> <div id="box"> <div id="title"></div> </div> <script type="text/javascript"> init(); </script> </body> </html>

　　推荐阅读

　　提供一款很不错的万年历查询

阿Q家园__又一款很不错的万年历查询 BODY { FONT-SIZE: 14px; SCROLLBAR-HIGHLIGHT-COLOR: buttonface; SCROLLBAR-SHADOW-COLOR: buttonface; COLOR: #333333; SCROLLBAR-3DLIGHT-COLOR: buttonhighlight>>>详细阅读

本文标题：javascript实现轮显新闻标题链接

地址：http://www.17bianji.com/kaifa2/JS/30201.html

1/2 1