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 相关文章推荐
WordPress 插件——CoolCode使用方法与下载
Jul 02 Javascript
Javascript 强制类型转换函数
May 17 Javascript
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
基于JQuery实现CheckBox全选全不选
Jun 27 Javascript
jquery处理json数据实例分析
Jun 03 Javascript
JS去除重复并统计数量的实现方法
Dec 15 Javascript
javascript DOM的详解及实例代码
Mar 06 Javascript
angular2 ng2 @input和@output理解及示例
Oct 10 Javascript
jQuery EasyUI window窗口使用实例代码
Dec 25 jQuery
详解ES6通过WeakMap解决内存泄漏问题
Mar 09 Javascript
如何在vue里添加好看的lottie动画
Aug 02 Javascript
JS中的继承操作实例总结
Jun 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
Zerg基本策略
2020/03/14 星际争霸
自动跳转中英文页面
2006/10/09 PHP
利用文件属性结合Session实现在线人数统计
2006/10/09 PHP
PHP 操作文件的一些FAQ总结
2009/02/12 PHP
apache中为php 设置虚拟目录
2014/12/17 PHP
php简单获取复选框值的方法
2016/05/11 PHP
PHP实现求解最长公共子串问题的方法
2017/11/17 PHP
Laravel关系模型指定条件查询方法
2019/10/10 PHP
js 跨域和ajax 跨域问题小结
2009/07/01 Javascript
jQuery入门问答 整理的几个常见的初学者问题
2010/02/22 Javascript
js实现的页面矩阵图形变换特效
2016/01/26 Javascript
将List对象列表转换成JSON格式的类实现方法
2016/07/04 Javascript
jQuery实现自动输入email、时间和域名的方法
2016/08/24 Javascript
AngularJS中update两次出现$promise属性无法识别的解决方法
2017/01/05 Javascript
Nodejs中使用captchapng模块生成图片验证码
2017/05/18 NodeJs
简单实现js进度条加载效果
2020/03/25 Javascript
NodeJS 将文件夹按照存放路径变成一个对应的JSON的方法
2018/10/17 NodeJs
JavaScript 接口原理与用法实例详解
2020/05/12 Javascript
[03:05]DOTA2英雄基础教程 嗜血狂魔
2013/12/10 DOTA
[57:37]EG vs Mineski 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
python基础教程之数字处理(math)模块详解
2014/03/25 Python
python实现下载文件的三种方法
2017/02/09 Python
Python之re操作方法(详解)
2017/06/14 Python
24式加速你的Python(小结)
2019/06/13 Python
使用python进行波形及频谱绘制的方法
2019/06/17 Python
Python编程学习之如何判断3个数的大小
2019/08/07 Python
Ubuntu配置Pytorch on Graph (PoG)环境过程图解
2020/11/19 Python
Python基于argparse与ConfigParser库进行入参解析与ini parser
2021/02/02 Python
庆八一活动方案
2014/01/25 职场文书
《小熊住山洞》教学反思
2014/02/21 职场文书
十佳中学生事迹材料
2014/06/02 职场文书
党的群众路线教育实践活动批评与自我批评发言稿
2014/10/16 职场文书
党支部先进事迹材料
2014/12/24 职场文书
初中生思想道德自我评价
2015/03/09 职场文书
感恩教师主题班会
2015/08/12 职场文书
教师素质教育心得体会
2016/01/19 职场文书