javascript实现轮显新闻标题链接

大太阳forever

大太阳forever

2016-02-19 09:21

下面图老师小编要向大家介绍下javascript实现轮显新闻标题链接,看起来复杂实则是简单的,掌握好技巧就OK,喜欢就赶紧收藏起来吧!
用两个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 (boxW400){
  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(boxW0){
  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
展开更多 50%)
分享

猜你喜欢

javascript实现轮显新闻标题链接

Web开发
javascript实现轮显新闻标题链接

用js实现的打字效果的带链接的新闻标题

Web开发
用js实现的打字效果的带链接的新闻标题

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

不错的新闻标题颜色效果

Web开发
不错的新闻标题颜色效果

javascript实现的多条新闻公告系统

Web开发
javascript实现的多条新闻公告系统

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

JavaScript标题新闻的定时翻滚(IE,FF,Opera,Safari,Chrome)

Web开发
JavaScript标题新闻的定时翻滚(IE,FF,Opera,Safari,Chrome)

JavaScript/JS实现标题栏跑马灯

Web开发
JavaScript/JS实现标题栏跑马灯

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

mysql 前几条记录语句之(limit)

mysql 前几条记录语句之(limit)

基于数据库的在线人数日访问量等统计

基于数据库的在线人数日访问量等统计
下拉加载更多内容 ↓