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 replace 与replaceall实例用法详解
Aug 03 Javascript
JavaScript—window对象使用示例
Dec 09 Javascript
JavaScript基础语法、dom操作树及document对象
Dec 02 Javascript
JS的数组迭代方法
Feb 05 Javascript
JS实现单击输入框弹出选择框效果完整实例
Dec 14 Javascript
谈谈第三方App接入微信登录 解读
Dec 27 Javascript
vue mintui-Loadmore结合实现下拉刷新和上拉加载示例
Oct 12 Javascript
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
Layui 设置select下拉框自动选中某项的方法
Aug 14 Javascript
创建echart多个联动的示例代码
Nov 23 Javascript
微信小程序保存多张图片的实现方法
Mar 05 Javascript
vux-scroller实现移动端上拉加载功能过程解析
Oct 08 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
深入phpMyAdmin的安装与配置的详细步骤
2013/05/07 PHP
yii2.0使用Plupload实现带缩放功能的多图上传
2015/12/22 PHP
详解PHP的Yii框架中扩展的安装与使用
2016/04/01 PHP
基于PHP实现通过照片获取ip地址
2016/04/26 PHP
PHP微信支付开发实例
2016/06/22 PHP
Laravel框架路由设置与使用示例
2018/06/12 PHP
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
Js中的onblur和onfocus事件应用介绍
2013/08/27 Javascript
JavaScript1.6数组新特性介绍以及JQuery的几个工具方法
2013/12/06 Javascript
利用浏览器全屏api实现js全屏
2014/01/16 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
2014/04/29 Javascript
一个Action如何调用两个不同的方法
2014/05/22 Javascript
全面解析Bootstrap中nav、collapse的使用方法
2016/05/22 Javascript
JSON键值对序列化和反序列化解析
2017/01/24 Javascript
jQuery通过改变input的type属性实现密码显示隐藏切换功能
2017/02/08 Javascript
BootStrap自定义popover,点击区域隐藏功能的实现
2018/01/23 Javascript
解决vue项目打包后提示图片文件路径错误的问题
2018/07/04 Javascript
浅析vue-router jquery和params传参(接收参数)$router $route的区别
2018/08/03 jQuery
webstorm+vue初始化项目的方法
2018/10/18 Javascript
浅析Vue中拆分视图层代码的5点建议
2019/08/15 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
浅析Python中将单词首字母大写的capitalize()方法
2015/05/18 Python
python主线程捕获子线程的方法
2018/06/17 Python
详解python 3.6 安装json 模块(simplejson)
2019/04/02 Python
Python Django框架防御CSRF攻击的方法分析
2019/10/18 Python
python3.7+selenium模拟淘宝登录功能的实现
2020/05/26 Python
Python configparser模块操作代码实例
2020/06/08 Python
Python优秀开源项目Rich源码解析的流程分析
2020/07/06 Python
Alpine安装Python3依赖出现的问题及解决方法
2020/12/25 Python
美国时尚在线:Showpo
2017/09/08 全球购物
NYX Professional Makeup官方网站:专业彩妆和美容产品
2019/10/29 全球购物
汽车专业毕业生自荐信
2013/11/03 职场文书
工作违纪检讨书
2014/02/17 职场文书
幼儿园社区活动总结
2014/07/07 职场文书
社区关爱留守儿童活动方案
2014/08/22 职场文书
MySQL数据库如何给表设置约束详解
2022/03/13 MySQL