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入门教程(5) js Screen屏幕对象
Jan 31 Javascript
JS判断两个时间大小的示例代码
Jan 28 Javascript
angularJS 中$attrs方法使用指南
Feb 09 Javascript
JS运动基础框架实例分析
Mar 03 Javascript
JavaScript截取、切割字符串的技巧
Jan 07 Javascript
三种AngularJS中获取数据源的方式
Feb 02 Javascript
JS hashMap实例详解
May 26 Javascript
轻松掌握JavaScript状态模式
Sep 07 Javascript
js求数组中全部数字可拼接出的最大整数示例代码
Aug 25 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
Dec 25 Javascript
vuejs选中当前样式active的实例
Aug 22 Javascript
Node.JS如何实现JWT原理
Sep 18 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 中使用随机数的三个步骤
2006/10/09 PHP
详解WordPress中创建和添加过滤器的相关PHP函数
2015/12/29 PHP
深入理解PHP原理之执行周期分析
2016/06/01 PHP
PHP数字金额转换成中文大写显示
2019/01/05 PHP
thinkphp5.1框架模板布局与模板继承用法分析
2019/07/19 PHP
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
js实现select组件的选择输入过滤代码
2014/10/14 Javascript
JS修改iframe页面背景颜色的方法
2015/04/01 Javascript
解读Bootstrap v4 sass设计
2016/05/29 Javascript
jQuery中的deferred对象和extend方法详解
2017/05/08 jQuery
JavaScript this指向相关原理及实例解析
2020/07/10 Javascript
JavaScript 闭包的使用场景
2020/09/17 Javascript
[01:14]2014DOTA2展望TI 剑指西雅图newbee战队专访
2014/06/30 DOTA
python处理二进制数据的方法
2015/06/03 Python
浅析Python函数式编程
2018/10/06 Python
Python使用requests提交HTTP表单的方法
2018/12/26 Python
python3利用ctypes传入一个字符串类型的列表方法
2019/02/12 Python
Python迭代器iterator生成器generator使用解析
2019/10/24 Python
pygame实现五子棋游戏
2019/10/29 Python
Python通过VGG16模型实现图像风格转换操作详解
2020/01/16 Python
python IDLE添加行号显示教程
2020/04/25 Python
浅谈keras中自定义二分类任务评价指标metrics的方法以及代码
2020/06/11 Python
使用npy转image图像并保存的实例
2020/07/01 Python
Django Model层F,Q对象和聚合函数原理解析
2020/11/12 Python
关于Python 解决Python3.9 pandas.read_excel(‘xxx.xlsx‘)报错的问题
2020/11/28 Python
如何查看python关键字
2021/01/17 Python
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
HTML+CSS3+JS 实现的下拉菜单
2020/11/25 HTML / CSS
日本无添加化妆品:HABA
2016/08/18 全球购物
本科毕业论文导师评语
2014/12/31 职场文书
接收函格式
2015/01/30 职场文书
2015年光棍节活动总结
2015/03/24 职场文书
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
Shell脚本一键安装Nginx服务自定义Nginx版本
2022/03/20 Servers
MySql数据库触发器使用教程
2022/06/01 MySQL
LeetCode189轮转数组python示例
2022/08/05 Python