学了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;
}