jQuery实现网站顶部下拉自动收缩广告代码

最近自己开发了一个手机记账App（DD记账）、本来是想在DD博客做一个全站的jQuery网站顶部定时折叠收起广告的、但想到会影响DD博客用户的用户体验、所以就放弃了这个念头、下面把这个Demo分享给大家

当网页加载完成的时候会由上往下的一个滑动展开广告图片、Demo设置的是过5秒之后自动收缩、当然这个参数是可以在源代码里面直接更改的、然后有一个arrow、点击可展开、再点击可以收缩、加入到自己的项目只需要在head区域引入样式表文件lrtk.css和jquery-1.8.3.min.js以及lrtk.js、就可以正常运行了、GIF效果图片如下

将内容插入到body开始处

//将内容插入到body开始处，页面加载完毕后自动展开
$(´body´).prepend("<div class=´lrtk´><a href=´http://income.dwtedx.com/´ target=´_blank´ class=´link´></a></div>");
$(´.lrtk´).slideDown(1500,function(){
    $(´.lrtk´).append("<a href=´javascript:;´ class=´up´></a>");
});    
//设置延时函数
function adsUp(){
    $(´.lrtk´).animate({
        height:´20px´
    },1000,function(){
        $(this).find(´.up´).addClass(´down´).removeClass(´up´);
    });
}

五秒钟后自动收起

var t = setTimeout(adsUp,5000);
//点击收起
$(´.lrtk a.up´).live(´click´,function(){
    clearTimeout(t);
    $(´.lrtk´).animate({
        height:´20px´
    },function(){
        $(this).find(´.up´).addClass(´down´).removeClass(´up´);
    });     
});    

点击下拉

//点击下拉
$(´.lrtk a.down´).live(´click´,function(){
    $(this).css({
        opacity:´0´    ,
        filter:´alpha(opacity=0)´
    });
    $(´.lrtk´).animate({
        height:´350px´
    },function(){
        $(this).find(´.down´).addClass(´up´).removeClass(´down´).css({opacity:´1´,filter:´alpha(opacity=100)´});
    });
});

网站顶部伸缩广告源代码下载链接: 网页顶部广告代码 密码: xrt7