广告条滑入滑出源代码实现
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告条滚动</title>
<style type="text/css">
*{
padding: 0px;
margin: 0 auto;
}
#ad{
1000px;
height:300px;
font-size: 50px;
background: red;
font-weight: 1000;
font-size: 100px;
/*margin-top:-300px;*/
}
#box{
1000px;
height:800px;
background: green;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oad=document.getElementById('ad');//获得ad元素
var timer=setInterval(function(){//定时器向下滑
var oldtop=parseInt(oad.style.marginTop);//获得ad离上边的距离
oldtop+=10;//距离增大
oad.style.marginTop=oldtop+'px';//赋值
if(oldtop==0){//如果到达位置，关闭定时器
clearInterval(timer);
}
},30);
setTimeout(function(){//3秒后执行
var time=setInterval(function(){//30毫秒执行一次
var oldtop=parseInt(oad.style.marginTop);//获得ad离上边的距离
oldtop-=10;//距离减小
oad.style.marginTop=oldtop+'px';//赋值
if(oldtop==-300){//到达位置，关闭定时器
clearInterval(time);
}
},30)
},3000)
}
</script>
</head>
<body>
<div id="ad" style="margin-top:-300px;">欢迎来到本网站</div>
<div id="box"></div>
</body>
</html>