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 相关文章推荐
js改变文章字体大小的实例代码
Nov 27 Javascript
js 动态加载事件的几种方法总结
Dec 25 Javascript
JS调试必备的5个debug技巧
Mar 07 Javascript
javascript实现获取浏览器版本、操作系统类型
Jan 29 Javascript
Jquery 效果使用详解
Nov 23 Javascript
requireJS使用指南
Apr 27 Javascript
AngularJS过滤器filter用法分析
Dec 11 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
Node.js中环境变量process.env的一些事详解
Oct 26 Javascript
vue 实现移动端键盘搜索事件监听
Nov 06 Javascript
js动态添加带圆圈序号列表的实例代码
Feb 18 Javascript
基于vue的video播放器的实现示例
Feb 19 Vue.js
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 pcntl_fork和pcntl_fork 的用法
2009/04/13 PHP
php广告加载类用法实例
2014/09/23 PHP
php获取文件名后缀常用方法小结
2015/02/24 PHP
PHP会话操作之cookie用法分析
2016/09/28 PHP
对联广告js flash激活
2006/10/19 Javascript
用于判断用户注册时,密码强度的JS代码
2009/01/01 Javascript
jquery multiSelect 多选下拉框
2010/07/09 Javascript
jQuery1.5.1 animate方法源码阅读
2011/04/05 Javascript
利用jQuery操作对象数组的实现代码
2011/04/27 Javascript
JS等比例缩小图片尺寸的实例
2013/02/27 Javascript
json数据的列循环示例
2013/09/06 Javascript
使用iframe window的scroll方法控制iframe页面滚动
2014/03/05 Javascript
JavaScript中的函数嵌套使用
2015/06/04 Javascript
jQuery EasyUI Pagination实现分页的常用方法
2016/05/21 Javascript
javascript与jquery动态创建html元素示例
2016/07/25 Javascript
Javascript 正则表达式校验数字的简单实例
2016/11/02 Javascript
JS制作类似选项卡切换的年历
2016/12/03 Javascript
jquery设置css样式的多种方法(总结)
2017/02/21 Javascript
react native 文字轮播的实现示例
2018/07/27 Javascript
js实现时分秒倒计时
2019/12/03 Javascript
js实现简单的轮播图效果
2020/12/13 Javascript
python实现两个文件合并功能
2018/04/01 Python
PyQt5每天必学之布局管理
2018/04/19 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
Python爬虫图片懒加载技术 selenium和PhantomJS解析
2019/09/18 Python
解决pyCharm中 module 调用失败的问题
2020/02/12 Python
python开发实例之python使用Websocket库开发简单聊天工具实例详解(python+Websocket+JS)
2020/03/18 Python
Python3.9.1中使用match方法详解
2021/02/08 Python
网络工程师的自我评价
2013/10/02 职场文书
国际贸易专业推荐信
2013/11/15 职场文书
怎样写演讲稿
2014/01/04 职场文书
竞选大队委员演讲稿
2014/04/28 职场文书
个人租房协议书样本
2014/10/01 职场文书
汽车销售员岗位职责
2015/04/11 职场文书
2015年世界无烟日活动方案
2015/05/04 职场文书
Rust 连接 PostgreSQL 数据库的详细过程
2022/01/22 PostgreSQL