Java实现广告屏播放切换_使用javascript实现某网站的头部广告向上切换效果

学了javascript后，看到某网站的一个头部广告效果很不错，感觉自己也能做出来，于是经过我一下午的奋斗，哈哈，我成功了，虽然实现可能很麻烦，但没法，如果你理解我的程序，如果你有更好的方法，请留下宝贵意见，不要吝啬嗯。。

我得思路很简单，也可以说是很单一吧，就是用定时器控制top来实现的。

效果图：

代码：：：：：：：

爱家家具首页

• 桔子手机GT6,一降到底，让客户无限惊喜！
• 桔子手机GT6疯狂低价，团购啦！！！
• 安卓(Android)系统+WCDMA 3G网络，俱在GT6

var str=document.getElementsByTagName("div");

for(var i=0;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();

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;

}