javascript實現(xiàn)輪顯新聞標題鏈接

更新時間：2007年08月13日 19:54:00 投稿：mdxy-dxy

這篇文章主要介紹了javascript實現(xiàn)輪顯新聞標題鏈接的相關資料,需要的朋友可以參考下

用兩個div嵌套鏈接文字，最外面的div設置 overflow:hidden，并用js動態(tài)控制它的width，實現(xiàn)伸展與收縮。

<!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 = "世界上第一個比空氣重的航空器是什么？|手機泄密！你以為已經(jīng)刪掉的照片，就是這么被找回泄露的！|M2 iPad Pro 真的要來了！|不知道，現(xiàn)在還有多少人在意小屏手機呢？";
var newsLinks = "http://news.sina.com.cn|http://news.sina.com.cn/c/2006-09-02/093410901015.shtml|https://new.qq.com/rain/a/20221008V06OGZ00|https://new.qq.com/rain/a/20221016A06DR500|https://new.qq.com/rain/a/20221012A06FF100";
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>