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 相关文章推荐
jQuery ajax 路由和过滤器使用说明
Aug 02 Javascript
jQuery EasyUI API 中文文档 - NumberSpinner数值微调器使用介绍
Oct 21 Javascript
Javascript学习笔记之函数篇(五) : 构造函数
Nov 23 Javascript
JavaScript错误处理
Feb 03 Javascript
第一章之初识Bootstrap
Apr 25 Javascript
JS实现带动画的回到顶部效果
Dec 28 Javascript
jQuery实现表单动态加减、ajax表单提交功能
Jun 08 jQuery
手淘flexible.js框架使用和源代码讲解小结
Oct 15 Javascript
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Windows下Node爬虫神器Puppeteer安装记
Jan 09 Javascript
JS使用对象的defineProperty进行变量监控操作示例
Feb 02 Javascript
分享JS表单验证源码(带错误提示及密码等级)
Jan 05 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
咖啡产品发展的三大浪潮
2021/03/04 咖啡文化
PHP中使用Imagick读取pdf并生成png缩略图实例
2015/01/21 PHP
详解PHP的Yii框架中组件行为的属性注入和方法注入
2016/03/18 PHP
php实现xml与json之间的相互转换功能实例
2016/07/07 PHP
tp5框架使用cookie加密算法实现登录功能示例
2020/02/10 PHP
浅析Js中的单引号与双引号问题
2013/11/06 Javascript
jQuery之过滤元素操作小结
2013/11/30 Javascript
基于jQuery Bar Indicator 插件实现进度条展示效果
2015/09/30 Javascript
Perl Substr()函数及函数的应用
2015/12/16 Javascript
谈一谈javascript中继承的多种方式
2016/02/19 Javascript
node.js连接MongoDB数据库的2种方法教程
2017/05/17 Javascript
jQuery选择器之属性过滤选择器详解
2017/09/28 jQuery
详解vscode中vue代码颜色插件
2018/10/11 Javascript
ES6知识点整理之函数数组参数的默认值及其解构应用示例
2019/04/17 Javascript
JS字符串与二进制的相互转化实例代码详解
2019/06/28 Javascript
分享Angular http interceptors 拦截器使用(推荐)
2019/11/10 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
Vue单页面应用中实现Markdown渲染
2021/02/14 Vue.js
Python实现将n个点均匀地分布在球面上的方法
2015/03/12 Python
用Python设计一个经典小游戏
2017/05/15 Python
Python接口自动化判断元素原理解析
2020/02/24 Python
python nohup 实现远程运行不宕机操作
2020/04/16 Python
使用TensorBoard进行超参数优化的实现
2020/07/06 Python
GUESS西班牙官方网上商城:美国服饰品牌
2017/03/15 全球购物
Dogeared官网:在美国手工制作的珠宝
2019/08/24 全球购物
进程的查看和调度分别使用什么命令
2013/12/14 面试题
Set里的元素是不能重复的,那么用什么方法来区分重复与否呢?
2016/08/18 面试题
数学专业推荐信范文
2013/11/21 职场文书
公司新员工的演讲稿注意事项
2014/01/01 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
2015年消费者权益日活动总结
2015/02/09 职场文书
房地产财务经理岗位职责
2015/04/08 职场文书
2015年乡镇纪检工作总结
2015/04/22 职场文书
2016中秋节问候语
2015/11/11 职场文书
2019商业计划书格式、范文
2019/04/24 职场文书
解析Java异步之call future
2021/06/14 Java/Android