关于JQuery的实现下拉广告的效果
今天周末,可是也别忘了学习哦~
今天给大家带来的是页面下拉广告的效果。
由于是动态效果,截图也没什么意思,就直接跟大家讲下。
当你刷新页面时,会有个广告从顶部慢慢向下移动,然后停留2秒,在慢慢向上返回。
真正有用的代码,其实就这么几行
$(function(){
$(".ad").animate({marginTop:0},2000,function(){
setTimeout(function(){
$(".ad").animate({marginTop:-375},2000);
},2000);
});
});
Animate就是动画效果的方法,第一个参数是,这个动画执行后,$(“.ad”)这个元素所在的位置,第二个参数,指的是这个动画持续了2秒,第三个参数时只回调行数,就是当你动画执行完毕之后再执行这个函数。
setTimeout相当于定时器,第一个参数时要执行的函数,第二个参数是指过了多长时间再去执行这个函数。
参考代码:
<html>
<head>
<script src="jquery/jquery-1.4.1.min.js">
</script>
<style>
*{//这个样式的作用是,清除所有的边距
margin:0 auto;
padding:0;
}
.ad{
margin:-375 auto;
width:500px;
height:375px;
}
</style>
<script>
$(function(){
$(".ad").animate({marginTop:0},2000,function(){
setTimeout(function(){
$(".ad").animate({marginTop:-375},2000);
},2000);
});
});
</script>
</head>
<body>
<div class="ad"><img src="img/baxkground.png"/></div>
</body>
</html>
参考了北风网的视频教程。大家也可以有空去看看视频教程,相信一定会获益匪浅的,牛人很多,期待下一个牛人就是你~