时间轴特效

<!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=utf-8" />
<title>无标题文档</title>
<style>
.A
{
500px;
height:60px;
border-top:1px solid black;
position:relative;
margin-top:40px;
margin-left:100px;
}
.A1
{
float:left;
96px;
height:50px;
border:1px solid red;
position:relative;
margin-top:4px;
margin-left:1.5px;
font-size:12px;

}
.a
{
500px;
height:300px;
border:1px solid red;
position:relative;
margin-top:0px;
margin-left:100px;
}
.b
{
400px;
height:200px;
border:1px solid red;
position:relative;
margin:auto;
margin-top:50px;

}
.c
{
80%;
height:36px;
position:relative;
float:left;
margin-left:10%;
border:1px blue solid;
margin-top:1px;
font-size:12px;
}

</style>
</head>

<body>
<div class="A">
<div class="A1" onmouseover="qiehuan1()">综合</div>
<div class="A1" onmouseover="qiehuan2()">活动</div>
<div class="A1" onmouseover="qiehuan3()">公告</div>
<div class="A1" onmouseover="qiehuan4()">赛事</div>
<div class="A1" onmouseover="qiehuan5()">论坛</div>
</div>
<div class="a">
<div class="b">
<div class="c" id="tu1">9月十日开学送好礼</div>
<div class="c" id="tu2">[全民争霸赛]2016全民争霸赛9月城市赛 网吧参赛信息指引</div>
<div class="c" id="tu3">抗战胜利日专项</div>
<div class="c" id="tu4">开学惊喜回馈 贵族礼包送福利!</div>
<div class="c" id="tu5">魔法鼠标来袭,变形大喷口A车齐</div>
</div>
</div>
</body>
</html>
<script>
function qiehuan1()
{
var aaa=document.getElementById("tu1")
aaa.innerText="水水水水水水水水"
var bbb=document.getElementById("tu2")
bbb.innerText="的顶顶顶顶顶顶顶顶顶顶"
var ccc=document.getElementById("tu3")
ccc.innerText="方法方法反反复复方法"
var ddd=document.getElementById("tu4")
ddd.innerText="不不不不不不不不不不"
var eee=document.getElementById("tu5")
eee.innerText="擦擦擦擦擦擦擦擦擦擦"

}
function qiehuan2()
{
var aaa=document.getElementById("tu1")
aaa.innerText="顶顶顶顶顶顶顶顶顶顶顶顶顶顶顶"
var bbb=document.getElementById("tu2")
bbb.innerText="方法反反复复方法反反复复方法反反复复飞"
var ccc=document.getElementById("tu3")
ccc.innerText="和哈哈哈哈哈哈哈哈哈哈哈哈和"
var ddd=document.getElementById("tu4")
ddd.innerText="她天天她天天吞吞吐吐吞吞吐吐吞吞吐吐"
var eee=document.getElementById("tu5")
eee.innerText="不不不不不不不不不不不不不不不"

}
function qiehuan3()
{
var aaa=document.getElementById("tu1")
aaa.innerText="和哈哈哈哈哈哈哈哈哈哈哈哈和"
var bbb=document.getElementById("tu2")
bbb.innerText="么么么么么么么么吗"
var ccc=document.getElementById("tu3")
ccc.innerText="嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯"
var ddd=document.getElementById("tu4")
ddd.innerText="vvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvvve"
var eee=document.getElementById("tu5")
eee.innerText="啊啊啊啊啊啊啊啊啊啊啊啊啊"

}
function qiehuan4()
{
var aaa=document.getElementById("tu1")
aaa.innerText="不不不不不不不不不不不不不不不吧"
var bbb=document.getElementById("tu2")
bbb.innerText="uuuuuu"
var ccc=document.getElementById("tu3")
ccc.innerText="急急急急急急急急急急急急急急急急急急"
var ddd=document.getElementById("tu4")
ddd.innerText="么么么么么么么么么么么么么么么么么么么"
var eee=document.getElementById("tu5")
eee.innerText="她天天她天天她天天吞吞吐吐吞吞吐吐吞吞吐吐"

}
function qiehuan5()
{
var aaa=document.getElementById("tu1")
aaa.innerText="vvvvvvvvvvvvvvvvv"
var bbb=document.getElementById("tu2")
bbb.innerText="嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯嗯"
var ccc=document.getElementById("tu3")
ccc.innerText="方法反反复复方法反反复复方法反反复复飞"
var ddd=document.getElementById("tu4")
ddd.innerText="灌灌灌灌灌灌灌灌灌灌灌灌灌灌"
var eee=document.getElementById("tu5")
eee.innerText="哈哈哈和哈哈哈哈哈哈哈哈哈哈哈哈和"

}
</script>

原文地址:https://www.cnblogs.com/smile-dream/p/5849584.html