jQuery实现网站顶部下拉自动收缩广告代码
2016-06-02 13:24:36  By: dwtedx

最近自己开发了一个手机记账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

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+