您的位置:首页 > 技术源码 > 前端技术
JQuery实现顶部伸缩广告方法
分类:JQuery  编辑:admin  日期:2016-04-19  浏览:133
 

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>

本文标签:JQuery | 伸缩广告
上一篇:关于css样式表中div定位position的详细介绍下一篇:返回列表