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 获取select下拉列表值的代码
Sep 07 Javascript
基于jQuery的js分页代码
Jun 10 Javascript
JQuery操作表格(隔行着色,高亮显示,筛选数据)
Feb 23 Javascript
jQuery 过滤not()与filter()实例代码
May 10 Javascript
禁止IE用右键的JS代码
Dec 30 Javascript
使用JavaScript的ActiveXObject对象检测应用程序是否安装的方法
Apr 15 Javascript
js文件包含的几种方式介绍
Sep 28 Javascript
js老生常谈之this,constructor ,prototype全面解析
Apr 05 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
微信公众平台开发教程(四) 实例入门:机器人回复(附源码)
Dec 02 Javascript
用 Vue.js 递归组件实现可折叠的树形菜单(demo)
Dec 25 Javascript
JavaScript实现点击自制菜单效果
Feb 02 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
生成ubuntu自动切换壁纸xml文件的php代码
2010/07/17 PHP
JavaScript中的类继承
2010/11/25 Javascript
js网页侧边随页面滚动广告效果实现
2011/04/14 Javascript
JS基础之undefined与null的区别分析
2011/08/08 Javascript
利用jQuery简单实现产品展示图片左右滚动功能(示例代码)
2014/01/02 Javascript
javaScript的函数对象的声明详解
2015/02/06 Javascript
Javascript字符串常用方法详解
2016/07/21 Javascript
最棒的Angular2表格控件
2016/08/10 Javascript
详细讲解JavaScript中的this绑定
2016/10/10 Javascript
js实现固定宽高滑动轮播图效果
2017/01/13 Javascript
BootStrap Table前台和后台分页对JSON格式的要求
2017/06/28 Javascript
Vue v2.4中新增的$attrs及$listeners属性使用教程
2018/01/08 Javascript
VuePress 快速踩坑小结
2019/02/14 Javascript
vue轻量级框架无法获取到vue对象解决方法
2019/05/12 Javascript
Vue.js 中制作自定义选择组件的代码附演示demo
2020/02/28 Javascript
vue点击标签切换选中及互相排斥操作
2020/07/17 Javascript
nuxt 实现在其它js文件中使用store的方式
2020/11/05 Javascript
[50:48]LGD vs CHAOS 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python sys.argv用法实例
2015/05/28 Python
python批量实现Word文件转换为PDF文件
2018/03/15 Python
python中字符串的操作方法大全
2018/06/03 Python
Django框架设置cookies与获取cookies操作详解
2019/05/27 Python
python+jinja2实现接口数据批量生成工具
2019/08/28 Python
jupyter 中文乱码设置编码格式 避免控制台输出的解决
2020/04/20 Python
python遍历路径破解表单的示例
2020/11/21 Python
Python3+Flask安装使用教程详解
2021/02/16 Python
惠普墨西哥官方商店:HP墨西哥
2016/12/01 全球购物
全球知名的珠宝首饰品牌:Kay Jewelers
2018/02/11 全球购物
Java中实现多态的机制
2015/08/09 面试题
中学教师教育感言
2014/02/21 职场文书
病媒生物防治方案
2014/05/13 职场文书
小学运动会演讲稿
2014/08/25 职场文书
个人维稳承诺书
2015/05/04 职场文书
django如何自定义manage.py管理命令
2021/04/27 Python
详细总结Python常见的安全问题
2021/05/21 Python
springboot 自定义配置 解决Boolean属性不生效
2022/03/18 Java/Android