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 各浏览器的 Javascript 效率对比
Jan 23 Javascript
Google 静态地图API实现代码
Nov 19 Javascript
一个js过滤空格的小函数
Oct 10 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
Aug 12 Javascript
浅谈jQuery中的eq()与DOM中element.[]的区别
Oct 28 Javascript
Bootstrap简单表单显示学习笔记
Nov 15 Javascript
JSON键值对序列化和反序列化解析
Jan 24 Javascript
jquery Ajax实现Select动态添加数据
Jun 08 jQuery
vue translate peoject实现在线翻译功能【新手必看】
Jun 07 Javascript
通过npm或yarn自动生成vue组件的方法示例
Feb 12 Javascript
uploadify插件实现多个图片上传并预览
Sep 30 Javascript
深入了解JavaScript词法作用域
Jul 29 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
PHPMyAdmin 快速配置方法
2009/05/11 PHP
关于PHP二进制流 逐bit的低位在前算法(详解)
2013/06/13 PHP
php实现Linux服务器木马排查及加固功能
2014/12/29 PHP
php实现的日历程序
2015/06/18 PHP
round robin权重轮循算法php实现代码
2016/05/28 PHP
PHP中抽象类,接口功能、定义方法示例
2019/02/26 PHP
PHP 数组操作详解【遍历、指针、函数等】
2020/05/13 PHP
js 获取中文拼音,Select自动匹配字母获取值的代码
2009/09/23 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
使用Javascript简单实现图片无缝滚动
2014/12/05 Javascript
JS+CSS实现Div弹出窗口同时背景变暗的方法
2015/03/04 Javascript
JavaScript中判断函数、变量是否存在
2015/06/10 Javascript
AngularJS控制器继承自另一控制器
2016/05/09 Javascript
基于jQuery ligerUI实现分页样式
2016/09/18 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
ES6下React组件的写法示例代码
2017/05/04 Javascript
微信小程序实现action-sheet弹出底部菜单功能【附源码下载】
2017/12/09 Javascript
Vue项目查看当前使用的elementUI版本的方法
2018/09/27 Javascript
浅谈vue后台管理系统权限控制思考与实践
2018/12/19 Javascript
vue 集成 vis-network 实现网络拓扑图的方法
2019/08/07 Javascript
vue + node如何通过一个Txt文件批量生成MP3并压缩成Zip
2020/06/02 Javascript
python通过定义一个类实例作为ftp回调方法
2015/05/04 Python
Python中max函数用法实例分析
2015/07/17 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
python自动结束mysql慢查询会话的实例代码
2019/10/27 Python
python3实现绘制二维点图
2019/12/04 Python
python正则表达式匹配IP代码实例
2019/12/28 Python
python虚拟环境模块venv使用及示例
2020/03/04 Python
澳大利亚二手奢侈品网站:Modsie
2019/09/23 全球购物
毕业生精彩的自我评价分享
2013/10/06 职场文书
餐厅总厨求职信
2014/03/04 职场文书
大学英语专业求职信
2014/06/21 职场文书
孩子教育的心得体会
2014/09/01 职场文书
党的群众路线教育实践活动整改落实情况报告
2014/10/28 职场文书
搞笑婚庆主持词
2015/06/29 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书