[技术]

新闻标题左右轮换显示

日期：2006-11-07 15:46:47 天气：晴字体：大中小

<!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>

提示：您可以先修改部分代码再运行

上一篇：常用脚本菜单效果。

下一篇：鼠标点击图片切换效果。

评论(0) | 阅读(0) | 分类：技术 | 技术RSS | 最后更新：2009-02-07 15:46:47

昵　称： (必填)
QQ 号： (必填)
评　论： (必填5-250字)
验证码： (必填)

关于lijun 友情链接赣ICP备2022005502号

香港空间 - 网站设计>磁力泵