使用javascript实现某网站的头部广告向上切换效果
学了javascript后，看到某网站的一个头部广告效果很不错，感觉自己也能做出来，于是经过我一下午的奋斗，哈哈，我成功了，虽然实现可能很麻烦，但没法，如果你理解我的程序，如果你有更好的方法，请留下宝贵意见，不要吝啬嗯。。
我得思路很简单，也可以说是很单一吧，就是用定时器控制top来实现的。
效果图：
代码：：：：：：：
<!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>
<link href="./css/basic-header.css"rel="stylesheet" type="text/css" />
<style type="text/css">
</style>
</head>
<body>
<div class="header">
<div class="mediaWrap">
<div class="mediaLink">
<ul class="mediaBtn">
<li class="STYLE1">桔子手机GT6,一降到底，让客户无限惊喜！</li>
<li class="STYLE1">桔子手机GT6疯狂低价，团购啦！！！</li>
<li class="STYLE1">安卓(Android)系统+WCDMA 3G网络，俱在GT6</li>
</ul>
</div>
</div>
</div>
<script language="javascript" type="text/javascript">
var str=document.getElementsByTagName("div");
for(var i=0;i<str.length;i++){
if(str[i].className == 'mediaLink'){
var getStr = str[i];
}
}
getStr.style.top=-90+"px"
var divheight=0;
//定义div1的高度和div2的起始纵坐标大小增减的速度
var div1Speed=-1;
function floatimg(){
divheight+=div1Speed;
// alert(divheight);
if(divheight==-90){
getStr.style.top=30+"px";
divheight=30;
t=setTimeout("floatimg()",1);
}else if(divheight==0||divheight==-30||divheight==-60){
getStr.style.top=divheight+"px";
t=setTimeout("floatimg()",2000);
}else{
getStr.style.top=divheight+"px";
t=setTimeout("floatimg()",50);
}
}
floatimg();
</script>
</body>
</html>
CSS属性：：：：：
* {
margin:0;
padding:0;
}
body{
font-size:12px;
background-color: #f5f6f7;
color: #777;
font-family:"宋体","微软雅黑",Verdana,Arial;
width:760px;
color:#333;
position:relative;
margin-left:100px;
}
img{
border:0;
}
ul {
list-style-type:none;
}
.header {
width:986px;
height:60px;
position: relative;
padding-top: 12px;
background-image:url(../imges/logo2.gif);
}
.mediaWrap {
position: absolute;
top: 44px;
left: 180px;
width: 650px;
height: 30px;
line-height: 30px;
font-size: 20px;
font-weight: bold;
color: #F68000;
overflow: hidden;
}
.mediaLink {
position: absolute;
width: 560px;
}
.mediaLink li {
display: block;
width: 650px;
height: 30px;
text-align:center;
overflow: hidden;
}
