javascript实现轮显新闻标题链接


Posted in Javascript onAugust 13, 2007

用两个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 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
javaScript对文字按照拼音排序实现代码
Dec 27 Javascript
jquery动态导航插件dynamicNav用法实例分析
Sep 06 Javascript
javascript如何创建对象
Aug 29 Javascript
浅析Node.js:DNS模块的使用
Nov 23 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
Feb 07 Javascript
js 数据存储和DOM编程
Feb 09 Javascript
基于react组件之间的参数传递(详解)
Sep 05 Javascript
基于vue中css预加载使用sass的配置方式详解
Mar 13 Javascript
vue src动态加载请求获取图片的方法
Oct 17 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 Javascript
基于vue3.0.1beta搭建仿京东的电商H5项目
May 06 Javascript
document.open() 与 document.write()的区别
Aug 13 #Javascript
js小技巧--自动隐藏红叉叉
Aug 13 #Javascript
javascript据option的value值快速设定初始的selected选项
Aug 13 #Javascript
用js实现随机返回数组的一个元素
Aug 13 #Javascript
JavaScript 模仿vbs中的 DateAdd() 函数的代码
Aug 13 #Javascript
用JavaScript 处理 URL 的两个函数代码
Aug 13 #Javascript
增强的 JavaScript 的 trim 函数的代码
Aug 13 #Javascript
You might like
使用adodb lite解决问题
2006/12/31 PHP
PHP Echo字符串的连接格式
2016/03/07 PHP
Yii控制器中filter过滤器用法分析
2016/07/15 PHP
php分页原理 分页代码 分页类制作教程
2016/09/23 PHP
PHP对称加密函数实现数据的加密解密
2016/10/27 PHP
浅谈Laravel模板实体转义带来的坑
2019/10/22 PHP
Javascript中的相等与不等运算
2010/04/25 Javascript
JS+CSS相对定位实现的下拉菜单
2015/10/06 Javascript
javascript实现禁止复制网页内容汇总
2015/12/30 Javascript
关于session和cookie的简单理解
2016/06/08 Javascript
浅谈toLowerCase和toLocaleLowerCase的区别
2016/08/15 Javascript
通过npm引用的vue组件使用详解
2017/03/02 Javascript
Centos6.8下Node.js安装教程
2017/05/12 Javascript
vue组件挂载到全局方法的示例代码
2018/08/02 Javascript
JavaScript JMap类定义与使用方法示例
2019/01/22 Javascript
vue+element 实现商城主题开发的示例代码
2020/03/26 Javascript
koa中间件核心(koa-compose)源码解读分析
2020/06/15 Javascript
原生js实现贪吃蛇游戏
2020/10/26 Javascript
[01:11:21]DOTA2-DPC中国联赛 正赛 VG vs Elephant BO3 第一场 3月6日
2021/03/11 DOTA
Python 用户登录验证的小例子
2013/03/06 Python
在Python中使用SQLite的简单教程
2015/04/29 Python
一步步解析Python斗牛游戏的概率
2016/02/12 Python
python 2.6.6升级到python 2.7.x版本的方法
2016/10/09 Python
python3.6 tkinter实现屏保小程序
2019/07/30 Python
Python 使用 environs 库定义环境变量的方法
2020/02/25 Python
基于django 的orm中非主键自增的实现方式
2020/05/18 Python
HTML5 Canvas鼠标与键盘事件demo示例
2013/07/04 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
美国高档帽子网上商店:Hats.com
2018/08/09 全球购物
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
《赵州桥》教学反思
2014/02/17 职场文书
总经理秘书岗位职责
2014/03/17 职场文书
党员公开承诺书和承诺事项
2014/03/25 职场文书
学子宴致辞大全
2015/07/27 职场文书
【超详细】八大排序算法的各项比较以及各自特点
2021/03/31 Python
纯CSS实现一个简单步骤条的示例代码
2022/07/15 HTML / CSS