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 相关文章推荐
5款Javascript颜色选择器
Oct 25 Javascript
深入理解JavaScript系列(15) 函数(Functions)
Apr 12 Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 Javascript
JQUERY 实现窗口滚动搜索框停靠效果(类似滚动停靠)
Mar 27 Javascript
jQuery时间验证和转换为标准格式的时间格式
Mar 06 Javascript
JS查找英文文章中出现频率最高的单词
Mar 20 Javascript
Angular.js中ng-include用法及多标签页面的实现方式详解
May 07 Javascript
Iscrool下拉刷新功能实现方法(推荐)
Jun 26 Javascript
10分钟上手vue-cli 3.0 入门介绍
Apr 04 Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
Sep 14 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 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
mysql 的 like 问题,超强毕杀记!!!
2007/01/18 PHP
php上传文件并存储到mysql数据库的方法
2015/03/16 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
Jquery+CSS3实现一款简洁大气带滑动效果的弹出层
2013/05/15 Javascript
JavaScript保留关键字汇总
2015/12/01 Javascript
js手动播放图片实现图片轮播效果
2016/09/17 Javascript
JS和Canvas实现图片的预览压缩和上传功能
2018/03/30 Javascript
css配合JavaScript实现tab标签切换效果
2018/10/11 Javascript
支付宝小程序tabbar底部导航
2018/11/06 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
基于VUE的v-charts的曲线显示功能
2019/10/01 Javascript
简单了解JavaScript弹窗实现代码
2020/05/07 Javascript
vue keep-alive的简单总结
2021/01/25 Vue.js
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python基础教程之基本内置数据类型介绍
2014/02/20 Python
跟老齐学Python之再深点,更懂list
2014/09/20 Python
Python基于回溯法子集树模板解决旅行商问题(TSP)实例
2017/09/05 Python
Python开发中爬虫使用代理proxy抓取网页的方法示例
2017/09/26 Python
Python实现PS滤镜的万花筒效果示例
2018/01/23 Python
python实现图片批量压缩程序
2018/07/23 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python3 使用cookiejar管理cookie的方法
2018/12/28 Python
python opencv根据颜色进行目标检测的方法示例
2020/01/15 Python
哪些是python中web开发框架
2020/06/17 Python
python删除指定列或多列单个或多个内容实例
2020/06/28 Python
html5之Canvas路径绘图、坐标变换应用实例
2012/12/26 HTML / CSS
REISS英国官网:伦敦High Street最受欢迎品牌
2016/12/21 全球购物
Gucci法国官方网站:意大利奢侈品牌
2018/07/25 全球购物
Ellesse英国官网:意大利高级运动品牌
2019/07/23 全球购物
Groupon西班牙官方网站:在线优惠券和交易,节省高达70%
2021/03/13 全球购物
教师的实习自我鉴定
2013/12/17 职场文书
50岁生日感言
2014/01/23 职场文书
禁止高声喧哗的标语
2014/06/11 职场文书
结婚老公保证书
2015/02/26 职场文书
2015年生产车间工作总结
2015/04/22 职场文书
经典格言警句:没有热忱,世间便无进步
2019/11/13 职场文书