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 Tab 导航插件 (23个)
Jun 11 Javascript
使用jQuery实现input数值增量和减量的方法
Jan 24 Javascript
使用npm发布Node.JS程序包教程
Mar 02 Javascript
JavaScript原生对象常用方法总结(推荐)
May 13 Javascript
js实现省份下拉菜单效果
Feb 15 Javascript
使用jQuery监听扫码枪输入并禁止手动输入的实现方法(推荐)
Mar 21 jQuery
jQuery Masonry瀑布流布局神器使用详解
May 25 jQuery
jQueryUI Sortable 应用Demo(分享)
Sep 07 jQuery
Vue Autocomplete 自动完成功能简单示例
May 25 Javascript
ES6 let和const定义变量与常量的应用实例分析
Jun 27 Javascript
小程序如何定位所在城市及发起周边搜索
Feb 11 Javascript
VUE中setTimeout和setInterval自动销毁案例
Sep 07 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
DC最新动画电影:《战争之子》为何内容偏激,毁了一个不错的漫画
2020/04/09 欧美动漫
PHP简单系统数据添加以及数据删除模块源文件下载
2008/06/07 PHP
PHP变量内存分配问题记录整理
2013/11/27 PHP
详细解读PHP的Yii框架中登陆功能的实现
2015/08/21 PHP
PHP中类属性与类静态变量的访问方法示例
2016/07/13 PHP
PHP经典实用正则表达式小结
2017/05/04 PHP
Laravel框架定时任务2种实现方式示例
2018/12/08 PHP
表单提交验证类
2006/07/14 Javascript
JavaScript触发器详解
2007/03/10 Javascript
js点击页面其它地方将某个显示的DIV隐藏
2012/07/12 Javascript
js限制文本框输入长度两种限制方式(长度、字节数)
2012/12/19 Javascript
Raphael一个用于在网页中绘制矢量图形的Javascript库
2013/01/08 Javascript
Jquery增加鼠标中间功能mousewheel的实例代码
2013/09/05 Javascript
JS获取各种浏览器窗口大小的方法
2014/01/14 Javascript
推荐一款jQuery插件模板
2015/01/09 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
使用Raygun对Node.js应用进行错误处理的方法
2015/06/23 Javascript
用原生JS对AJAX做简单封装的实例代码
2016/07/13 Javascript
JS及JQuery对Html内容编码,Html转义
2017/02/17 Javascript
Vue如何引入远程JS文件
2017/04/20 Javascript
Webpack执行命令参数详解
2017/06/17 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
小程序如何在不同设备上自适应生成海报的实现方法
2019/08/20 Javascript
如何修改Vue打包后文件的接口地址配置的方法
2020/04/22 Javascript
jquery插件实现轮播图效果
2020/10/19 jQuery
Python Unittest自动化单元测试框架详解
2018/04/04 Python
Python随机生成身份证号码及校验功能
2018/12/04 Python
python存储16bit和32bit图像的实例
2018/12/05 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
新西兰珠宝品牌:Michael Hill
2017/09/16 全球购物
国贸类专业毕业生的求职信分享
2013/12/08 职场文书
红旗团支部事迹材料
2014/01/27 职场文书
网球场地租赁协议范本
2014/10/07 职场文书
幼儿园小班个人工作总结
2015/02/12 职场文书
家庭暴力离婚起诉书
2015/05/18 职场文书
我在伊朗长大观后感
2015/06/16 职场文书