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>