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 相关文章推荐
理解JavaScript变量作用域更轻松
Oct 25 Javascript
JavaScript实现找出字符串中第一个不重复的字符
Sep 03 Javascript
JavaScript字符串删除重复字符的方法
Dec 25 Javascript
基于jquery实现简单的分页控件
Mar 17 Javascript
简单几步实现返回顶部效果
Dec 05 Javascript
浅谈jQuery操作类数组的工具方法
Dec 23 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
js实现网页定位导航功能
Mar 07 Javascript
微信小程序后台解密用户数据实例详解
Jun 28 Javascript
JavaScript设计模式之构造函数模式实例教程
Jul 02 Javascript
详解vue 自定义marquee无缝滚动组件
Apr 09 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 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
php unset全局变量运用问题的深入解析
2013/06/17 PHP
phpmailer发送gmail邮件实例详解
2013/06/24 PHP
PHP获取二维数组中某一列的值集合
2015/12/25 PHP
PHP入门教程之正则表达式基本用法实例详解(正则匹配,搜索,分割等)
2016/09/11 PHP
yii框架结合charjs统计上一年与当前年数据的方法示例
2020/04/04 PHP
sina的lightbox效果。
2007/01/09 Javascript
Extjs中RowExpander控件的默认展开问题示例探讨
2014/01/24 Javascript
在JS数组特定索引处指定位置插入元素
2014/07/27 Javascript
Node.js读取文件内容示例
2017/03/07 Javascript
Jquery+Ajax+xml实现中国地区选择三级联动菜单效果(推荐)
2017/06/09 jQuery
基于JS实现网页中的选项卡(两种方法)
2017/06/16 Javascript
Angularjs中数据绑定的实例详解
2017/08/25 Javascript
js判断节假日实例代码
2017/12/27 Javascript
详解swipe使用及竖屏页面滚动方法
2018/06/28 Javascript
webstorm+vue初始化项目的方法
2018/10/18 Javascript
JSON是什么?有哪些优点?JSON和XML的区别?
2019/04/29 Javascript
webpack HappyPack实战详解
2019/10/08 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
[04:50]2019DOTA2高校联赛秋季赛四强集锦
2019/12/27 DOTA
[05:59]带你看看DPC的台前幕后
2021/03/11 DOTA
HTML5等待加载动画效果
2017/07/27 HTML / CSS
GEOX鞋美国官方网站:意大利会呼吸的鞋
2017/07/12 全球购物
八年级美术教学反思
2014/02/02 职场文书
求职信模板标准格式范文
2014/02/23 职场文书
应届毕业生自荐信例文
2014/02/26 职场文书
士力架广告词
2014/03/20 职场文书
商务日语专业毕业生自荐信
2014/03/27 职场文书
安全标语口号
2014/06/09 职场文书
2014年学校卫生工作总结
2014/11/20 职场文书
父母教会我观后感
2015/06/17 职场文书
六一儿童节致辞
2015/07/31 职场文书
《我和小伙伴》教学反思
2016/02/20 职场文书
工作报告范文
2019/06/20 职场文书
2019年“我为祖国点赞”演讲稿(3篇)
2019/09/26 职场文书
关于python爬虫应用urllib库作用分析
2021/09/04 Python