javascript实现轮显新闻标题链接
用两个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 = "世界上第一个比空气重的航空器是什么？|手机泄密！你以为已经删掉的照片，就是这么被找回泄露的！|M2 iPad Pro 真的要来了！|不知道，现在还有多少人在意小屏手机呢？";
var newsLinks = "http://news.sina.com.cn|http://news.sina.com.cn/c/2006-09-02/093410901015.shtml|https://new.qq.com/rain/a/20221008V06OGZ00|https://new.qq.com/rain/a/20221016A06DR500|https://new.qq.com/rain/a/20221012A06FF100";
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>
相关文章
这篇文章为大家分析一下js中的数组对象排序的一些知识，方便大家在以后使用中知道这些排序的原理2018-12-12
这篇文章主要介绍了JavaScript去掉数组重复项的方法,结合实例形式分析了javascript使用object特性实现数组去除重复项功能的相关操作技巧,需要的朋友可以参考下2018-07-07
这篇文章主要介绍了js验证IP及子网掩码的有效性,需要的朋友可以参考下2014-04-04
这篇文章主要介绍了微信小程序常用的3种提示弹窗实现详解,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下2019-09-09
这篇文章主要介绍了详解ES6 Promise Promise的生命周期和创建,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-08-08
怎么样让多个输入框中的内容同时变化？一般又要兼容IE与firefox2010-01-01
这篇文章主要介绍了javascript操作ul中li的方法,可实现鼠标经过li标签项对应改变背景色的功能,涉及javascript鼠标事件及页面元素属性的相关操作技巧,需要的朋友可以参考下2015-05-05
详解JavaScript如何实现并发控制的Promise队列调度器
Promise是JavaScript中一种处理异步操作的技术，提供了一种更优雅的方式来处理并发任务和串行化操作，本文主要介绍了实现并发控制的Promise队列调度器的方法，需要的可以参考一下2023-07-07
JavaScript数组去重这个问题,经常出现在面试题中,下面这篇文章主要给大家介绍了关于JavaScript数组去重的五种方法及其他细节和拓展的相关资料,文中通过实例代码以及图文介绍的非常详细,需要的朋友可以参考下2022-12-12
这篇文章主要介绍了JavaScript实现ASC转汉字及汉字转ASC的方法,涉及JavaScript编码转换的相关技巧,需要的朋友可以参考下2016-01-01
最新评论