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 相关文章推荐
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
Jan 12 Javascript
js获取电脑分辨率的思路及操作
Nov 22 Javascript
Javascript 鼠标移动上去 滑块跟随效果代码分享
Nov 23 Javascript
JavaScript中匿名函数用法实例
Mar 23 Javascript
基于jQuery通过jQuery.form.js插件实现异步上传
Dec 13 Javascript
微信小程序教程系列之视图层的条件渲染(10)
Apr 19 Javascript
利用Javascript实现一套自定义事件机制
Dec 14 Javascript
vue移动端轻量级的轮播组件实现代码
Jul 12 Javascript
微信小程序如何再次获取用户授权的方法
May 10 Javascript
在vue+element ui框架里实现lodash的debounce防抖
Nov 13 Javascript
简单了解Vue + ElementUI后台管理模板
Apr 07 Javascript
js实现微信聊天效果
Aug 09 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压缩多个CSS为一个css的代码并缓存
2011/04/21 PHP
php 保留字列表
2012/10/04 PHP
Opcache导致php-fpm崩溃nginx返回502
2015/03/02 PHP
PHP实现多文件上传的方法
2015/07/08 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
js+CSS 图片等比缩小并垂直居中实现代码
2008/12/01 Javascript
javascript new fun的执行过程
2010/08/05 Javascript
js 判断checkbox是否选中的操作方法
2012/11/09 Javascript
Jquery 获取对象的几种方式介绍
2014/01/17 Javascript
Jquery 实现checkbox全选方法
2015/01/28 Javascript
浅谈javascript的分号的使用
2015/05/12 Javascript
基于jQuery实现放大镜特效
2020/10/19 Javascript
jQuery插件实现文件上传功能(支持拖拽)
2020/08/27 Javascript
jquery 动态增加删除行的简单实例(推荐)
2016/10/12 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
2017/09/20 jQuery
一种angular的方法级的缓存注解(装饰器)
2018/03/13 Javascript
js实现鼠标单击Tab表单切换效果
2018/05/16 Javascript
深入解析koa之异步回调处理
2019/06/17 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
python中的hashlib和base64加密模块使用实例
2014/09/02 Python
Python插件virtualenv搭建虚拟环境
2017/11/20 Python
Python 解决中文写入Excel时抛异常的问题
2018/05/03 Python
python自定义函数实现一个数的三次方计算方法
2019/01/20 Python
Python自动化测试笔试面试题精选
2020/03/12 Python
新西兰领先的内衣店:Bendon Lingerie新西兰
2018/07/11 全球购物
暑假实习求职信范文
2013/09/22 职场文书
财务会计专业推荐信
2013/11/30 职场文书
教师自荐信范文
2013/12/09 职场文书
大学社团计划书
2014/05/01 职场文书
甘南现象心得体会
2014/09/11 职场文书
群众路线调研报告范文
2014/11/03 职场文书
护理实习生带教计划
2015/01/16 职场文书
纪律委员竞选稿
2015/11/19 职场文书
二年级作文之动物作文
2019/11/13 职场文书
浅谈Python基础之列表那些事儿
2021/05/11 Python