JQuery实现顶部伸缩广告
JQuery实现顶部伸缩广告方法,主要从以下三个方面考虑设计：
1、首先将要显示的广告隐藏起来。
2、通过向下滑动显示广告然的一段时间。
3、暂停时间结束后，广告自动缩向上滑动隐藏起来。
本方法主要涉及到JQuery中的2个主要方法。
1、通过animate() 方法来执行广告下滑，上移动作。
2、通过setTimeout()方法来控制广告停留时间。
本例广告代码如下：
<!DOCTYPE html>
<html>
<head>
<title>顶部弹出广告后缩回演示代码</title>
<script type"text/javasrcipt" src="jquery-1.9.1.min.js" ></script>
<script type="text/javascript">
$(function(){
$('.ad').animate({marginTop : 0},2000,function(){
setTimeout(function(){$('.ad').animate({marginTop : -128},2000)},3000);
});
});
</script>
<style>
body{
margin:0;
padding:0px;
height:5000px;
}
.ad{
width:1000px;
height:128px;
padding:0px;
position:relative;
margin:-128px auto 0;
}
.top1{
margin:0 auto;
padding:0px;
width:1000px;
height:80px;
background-color:red;
}
</style>
</head>
<body>
<div class="ad">
<img src="ad.jpg">
<div>
<div class="top1" >
</div>
</body>
</html>
