
HTML
首先我们在页面加背景图,并且加上关闭按钮:
<div id="top">
<em id="close_btn" title="关闭背景"></em>
</div> jQuery
当第一次加载页面时(这时还没有设置COOKIE等),当然要把背景图片加载,显示完整的页面效果。当我们点击“关闭”按钮时,这个时候Javascript会把页面已经加载的背景图片干掉,即不显示出来,并且设置COOKIE,通过COOKIE的过期时间来控制大背景图片是否显示。即当下次刷新页面时,如果COOKIE未过期,则不会加载大背景图片,反之则加载大背景图片,请看代码:
$(function(){
if(getCookie("mainbg")==0){
$("body,html").css("background","none");
$("#close_btn").hide();
}else{
$("body").css("background","url(images/body_bg.jpg)) no-repeat 50% 0");
$("html").css("background","url(images/html_bg.jpg) repeat-x 0 0");
$("#close_btn").show().css("background","url(images/close_btn.jpg) no-repeat");
}
//点击关闭
$("#close_btn").click(function(){
$("body,html").css("background","none");
$("#close_btn").hide();
setCookie("mainbg","0");
});
}) 很显然,我们是通过设置页面元素的CSS背景background属性来控制背景图的加载,并且通过getCOOKIE()和setCOOKIE()两个自定义函数来读取和设置COOKIE的。
//设置cookie
function setCookie(name,value){
var exp = new Date();
exp.setTime(exp.getTime() + 1*60*60*1000);//有效期1小时
document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
//取cookies函数
function getCookie(name){
var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
if(arr != null) return unescape(arr[2]); return null;
} 你可以通过本示例,做一个很多网站顶部会出现大的广告banner动画,这个可以用animte来实现。
*
回帖描述:*
链接类型:*
下载链接:*
描述:*
回帖描述:*
链接类型:*
阅读权限:*
下载链接:



聚优部落技术论坛 © 版权所有 鲁ICP备15007479号-6
Copyright(C)web.com, All Rights Reserved.
