javascript实现轮显新闻标题链接

 更新时间:2007年08月13日 19:54:00   转载 作者:  
用两个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>

相关文章

  • javascript/jquery获取地址栏url参数的方法

    javascript/jquery获取地址栏url参数的方法

    本篇文章主要是对javascript/jquery获取地址栏url参数的方法进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-03-03
  • 浅谈javascript中的三种弹窗

    浅谈javascript中的三种弹窗

    下面小编就为大家带来一篇浅谈javascript中的三种弹窗。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • JavaScript中的null和undefined区别介绍

    JavaScript中的null和undefined区别介绍

    这篇文章主要介绍了JavaScript中的null和undefined区别介绍,JavaScript中存在2个代表信息不存在的特殊值:null和undefined,本文主要讲解它们的区别,需要的朋友可以参考下
    2015-01-01
  • JavaScript中实现map功能代码分享

    JavaScript中实现map功能代码分享

    这篇文章主要介绍了JavaScript中实现map功能代码分享,本文直接给出实现代码,给出一个MAP类,类中包含大多数的常用方法,还可以自己扩展,需要的朋友可以参考下
    2015-06-06
  • 模块化react-router配置方法详解

    模块化react-router配置方法详解

    这篇文章主要介绍了模块化react-router配置方法详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-06-06
  • 浅谈Javascript的静态属性和原型属性

    浅谈Javascript的静态属性和原型属性

    本文给大家介绍的是javascript中的静态属性和原型属性,并附上示例分析,十分的实用,有需要的小伙伴可以参考下。
    2015-05-05
  • css和js实现弹出登录居中界面完整代码

    css和js实现弹出登录居中界面完整代码

    这篇文章主要介绍了css和js实现弹出登录居中界面,非常不错,具有参考借鉴价值,需要的朋友可以参考下
    2017-11-11
  • Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件

    Bootstrap 轮播(Carousel)插件是一种灵活的响应式的向站点添加滑块的方式。下面通过本文给大家介绍Bootstrap 轮播(Carousel)插件,非常不错,需要的朋友参考下吧
    2016-12-12
  • NodeJS的模块写法入门(实例代码)

    NodeJS的模块写法入门(实例代码)

    前面提到了NodeJS的命令行和Web版之“Hello,World”。命令行是直接执行hello.js文件,Web版的需要require http模块。http模块是NodeJS自身提供的
    2012-03-03
  • JavaScript事件学习小结(二)js事件处理程序

    JavaScript事件学习小结(二)js事件处理程序

    这篇文章主要介绍了JavaScript事件学习小结(二)js事件处理程序的相关资料,非常不错具有参考借鉴价值,需要的朋友可以参考下
    2016-06-06

最新评论