您的位置：首页 > 编程语言

广告条滑入滑出源代码实现

2015-06-19 23:20 375 查看

广告条滑入滑出源代码实现

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>广告条滚动</title>
<style type="text/css">
*{
padding: 0px;
margin: 0 auto;
}
#ad{
width:1000px;
height:300px;
font-size: 50px;
background: red;
font-weight: 1000;
font-size: 100px;
/*margin-top:-300px;*/
}
#box{
width: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>

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航