代码改变世界

JQ实现拉幕布广告效果

2011-11-23 11:09  ☆冷枫☆  阅读(2083)  评论(0编辑  收藏  举报

打开一个网站,首页顶部向下慢慢拉出一个大的banner广告,间隔几秒钟后广告逐渐向上收起最终显示一个小的广告在顶部。这种效果我们称之为拉幕布效果,不过是上下拉的。想要实现这种相关用jquery实现起来非常简单,就几句code搞定。

 

//加载首页大幅广告图片
function ShowBigImg(){
  $("#showBig").slideDown(2000);
}

//大图切换成小图
function changeImg(){
  $("#showBig").slideUp(2000,function(){
     $("#showSmall").slideDown(2000);
  }); 
}

setTimeout(changeImg,5000);

 

jq里面的两个id分别是大广告banner的id及收缩后显示广告的id ,仅此而已我们想要的这种效果就轻松搞定。