繁體中文当前位置: 首页 > 图文教程 > 网络编程 > Javascript > javascript实现轮显新闻标题链接
- Javascript
- javascript js cookie的存储,获取和删除
- 得到元素真实的背景颜色的js代码
- js获取url参数的使用扩展实例
- javascript 屏蔽鼠标键盘的几段代码
- 兼容IE FF Opera的javascript最短的拖动代码
- 创建一个复制UBB软件信息的链接或按钮的js代码
- js实现iframe动态调整高度的代码
- 浏览器无法运行JAVA脚本的解决方法
- js让弹出新窗口居中显示的脚本
- js常见表单应用技巧
- javascript 点击整页变灰的效果（可做退出效果）。
- 制作符合用户体验的漂亮的input输入框
- img的onload的另类用法
- 解读IE和firefox下JScript和HREF的执行顺序
- 用javascrpt将指定网页保存为Excel的代码
- 语义化 H1 标签
- JavaScript中Math对象使用说明
- JavaScipt基本教程之前言
- JavaScipt基本教程之JavaScript语言的基础
- JavaScipt对象的基本知识
Javascript 中的 javascript实现轮显新闻标题链接
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-12 浏览: 119 ::
收藏到网摘: n/a
用两个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>
评论 (0) All
