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 相关文章推荐
web css实现整站样式互相切换
Oct 29 Javascript
详解AngularJS的通信机制
Jun 18 Javascript
创建自己的jquery表格插件
Nov 25 Javascript
浅析javascript异步执行函数导致的变量变化问题解决思路
May 13 Javascript
JS控制静态页面传递参数并获取参数应用
Aug 10 Javascript
JS实现漂亮的时间选择框效果
Aug 20 Javascript
jquery 实时监听输入框值变化的完美方法(必看)
Jan 26 Javascript
浅谈原型对象的常用开发模式
Jul 22 Javascript
手机注册发送验证码倒计时的简单实例
Nov 15 Javascript
写一个Vue Popup组件
Feb 25 Javascript
微信小程序上传图片到php服务器的方法
May 23 Javascript
layui的布局和表格的渲染以及动态生成表格的方法
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 XML操作的各种方法解析(比较详细)
2010/06/17 PHP
PHP中header和session_start前不能有输出原因分析
2013/01/11 PHP
静态页面的值传递(三部曲)
2006/09/25 Javascript
JQuery筛选器全系列介绍
2013/08/27 Javascript
jquery的trigger和triggerHandler的区别示例介绍
2014/04/20 Javascript
jQuery使用attr()方法同时设置多个属性值用法实例
2015/03/26 Javascript
jquery计算鼠标和指定元素之间距离的方法
2015/06/26 Javascript
基于JQuery实现仿网易邮箱全屏动感滚动插件fullPage
2015/09/20 Javascript
原生js实现class的添加和删除简单代码
2016/07/12 Javascript
Vuejs第九篇之组件作用域及props数据传递实例详解
2016/09/05 Javascript
整理关于Bootstrap警示框的慕课笔记
2017/03/29 Javascript
JavaScript Drum Kit 指南(纯 JS 模拟敲鼓效果)
2017/07/23 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
React Native时间转换格式工具类分享
2017/10/24 Javascript
JS中用EL表达式获取上下文参数值的方法
2018/03/28 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
2018/06/14 jQuery
js嵌套的数组扁平化:将多维数组变成一维数组以及push()与concat()区别的讲解
2019/01/19 Javascript
[01:25]2015国际邀请赛最佳短片奖——斧王《拆塔英雄:天赋异禀》
2015/09/22 DOTA
[44:43]完美世界DOTA2联赛决赛日 FTD vs GXR 第一场 11.08
2020/11/11 DOTA
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
菜鸟使用python实现正则检测密码合法性
2016/01/05 Python
python实现决策树C4.5算法详解(在ID3基础上改进)
2017/05/31 Python
python Kmeans算法原理深入解析
2019/08/23 Python
python如何保存文本文件
2020/06/07 Python
CSS3实现闪烁动画效果的方法
2015/02/09 HTML / CSS
HTML5实现可缩放时钟代码
2017/08/28 HTML / CSS
高级运动鞋:GREATS
2019/07/19 全球购物
Theflamel意大利:女士奢华服装、鞋子和配件
2020/01/11 全球购物
逻辑链路控制协议
2016/10/01 面试题
外语学院毕业生的自我鉴定
2013/11/28 职场文书
新文化运动的口号
2014/06/21 职场文书
现场活动策划方案
2014/08/22 职场文书
2015年全民国防教育日活动总结
2015/03/23 职场文书
Java实现简易的分词器功能
2021/06/15 Java/Android
win10清理dns缓存
2022/04/19 数码科技
Flutter Navigator 实现路由传递参数
2022/04/22 Java/Android