jQuery网站顶部定时折叠收起广告代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery网站顶部定时折叠收起广告代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<meta name="keywords" content="JS代码,全屏广告,JS广告代码,JS特效代码" />
<meta name="description" content="此代码内容为jQuery网站顶部定时折叠收起广告代码，属于站长常用代码" />
<title>jQuery网站顶部定时折叠收起广告代码</title>
<link href="css/lrtk.css" rel="stylesheet" type="text/css" />
<script src="js/jquery-1.8.3.min.js"></script>
<script src="js/lrtk.js"></script>
</head>
<body>
<!-- 代码 开始 -->
   <!-- 在head区域 -->
<!-- 代码 结束 -->
</body>
</html>

JS代码(lrtk.js):

$(function(){
	//将内容插入到body开始处，页面加载完毕后自动展开$('body').prepend("<div class='lrtk'><a href='#' target='_blank' class='link'></a></div>");
	$('.lrtk').slideDown(1500,function(){
	$('.lrtk').append("<a href='javascript:;
	' class='up'></a>");
}
);
	//设置延时函数function adsUp(){
	$('.lrtk').animate({
	height:'100px'}
,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:'100px'}
,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:'250px'}
,function(){
	$(this).find('.down').addClass('up').removeClass('down').css({
	opacity:'1',filter:'alpha(opacity=100)'}
);
}
);
}
);
}
);

CSS代码(lrtk.css):

/* ����ͼ�� �Ѽ����� www.lanrentuku.com */
*{margin:0;padding:0;list-style:none;}
.lrtk{width:100%;height:250px;margin:0 auto;overflow:hidden;display:none;background:url(../images/big.jpg) no-repeat center top #7B010B;text-align:center;position:relative;}
.lrtk .link{width:100%;height:250px;display:block;z-index:10;}
.lrtk .up{display:block;width:120px;height:12px;background:url(../images/arrow.jpg) no-repeat left bottom;position:absolute;left:50%;bottom:0;z-index:20;margin-left:-60px;}
.lrtk .down{display:block;width:120px;height:12px;background:url(../images/arrow.jpg) no-repeat left top;position:absolute;left:50%;top:88px;z-index:20;margin-left:-60px;}

附件:下载该文件资源,减少时间成本(增值服务)