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 和 CSS 的文本特效插件集锦
Dec 12 Javascript
jquery利用命名空间移除绑定事件的方法
Mar 11 Javascript
jquery中val()方法是从最后一个选项往前读取的
Sep 06 Javascript
基于jquery实现ajax无刷新评论
Aug 19 Javascript
React Router基础使用
Jan 17 Javascript
基于angular2 的 http服务封装的实例代码
Jun 29 Javascript
浅谈VueJS SSR 后端绘制内存泄漏的相关解决经验
Dec 20 Javascript
深入Node TCP模块的理解
Mar 13 Javascript
js常用正则表达式集锦
May 17 Javascript
Vue页面刷新记住页面状态的实现
Dec 27 Javascript
JS async 函数的含义和用法实例总结
Apr 08 Javascript
koa中间件核心(koa-compose)源码解读分析
Jun 15 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过滤危险html代码
2008/08/18 PHP
php入门学习知识点四 PHP正则表达式基本应用
2011/07/14 PHP
PHP+jquery+ajax实现即时聊天功能实例
2014/12/23 PHP
解读PHP中的垃圾回收机制
2015/08/10 PHP
浅谈socket同步和异步、阻塞和非阻塞、I/O模型
2016/12/15 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
PHP+redis实现的悲观锁机制示例
2018/06/12 PHP
javascript英文日期(有时间)选择器
2007/05/02 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
JS获取并操作iframe中元素的方法
2013/03/21 Javascript
javascript模块化是什么及其优缺点介绍
2013/09/02 Javascript
js中string转int把String类型转化成int类型
2014/08/13 Javascript
node.js中的http.response.writeHead方法使用说明
2014/12/14 Javascript
jquery实现Li滚动时滚动条自动添加样式的方法
2015/08/10 Javascript
JavaScript中对JSON对象的基本操作示例
2016/05/21 Javascript
js实现html table 行,列锁定的简单实例
2016/10/13 Javascript
bootstrap datetimepicker2.3.11时间插件使用
2016/11/19 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
vue动态路由配置及路由传参的方式
2018/05/23 Javascript
微信小程序配置服务器提示验证token失败的解决方法
2019/04/03 Javascript
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
JS实现时间校验的代码
2020/05/25 Javascript
Python中的自定义函数学习笔记
2014/09/23 Python
python 返回列表中某个值的索引方法
2018/11/07 Python
python中bs4.BeautifulSoup的基本用法
2019/07/27 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
PyQt使用QPropertyAnimation开发简单动画
2020/04/02 Python
Python中and和or如何使用
2020/05/28 Python
安装Anaconda3及使用Jupyter的方法
2020/10/27 Python
h5使用canvas画布实现手势解锁
2019/01/04 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
俄罗斯最大的消费电子连锁零售商:Mvideo
2017/06/25 全球购物
应届大学毕业生找工作的求职信范文
2013/11/29 职场文书
鸟的天堂导游词
2015/01/31 职场文书
如何写新闻稿
2015/07/18 职场文书
2016年6月份红领巾广播稿
2015/12/21 职场文书