代码：cookie（一个广告展示例子）

这个小例子的要求是：

用户第一次进入，显示大图，2秒后大图动画关闭，再把小图动画展开；

用户再次进入后，只显示静态小图。

做法：

定义一个容器 .img201512ad，宽高写死：1190x70。——这样动画过程中，整个页面就不必全部重排，只部分重绘即可。

为了避免重名，把一些cookie函数包在 ctrl201512AdCookie 这个类里。

页面载入后，判断cookie，如果没有值，说明是初次进入，播放动画+打cookie；如果有值，不作处理（因为样式表已经预先定义了：大图隐藏、小图显示）

2015-12-17

<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="Pragma" content="no-cache">
<script type="text/javascript" src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript">
$(function(){
var ctrl201512AdCookie={
    setCookie:function(c_name,value,expiredays){
        var exdate=new Date()
        exdate.setDate(exdate.getDate()+expiredays)
        document.cookie=c_name+ "=" +escape(value)+
        ((expiredays==null) ? "" : ";expires="+exdate.toGMTString())
    },
    getCookie:function(c_name){
        if (document.cookie.length>0){
            c_start=document.cookie.indexOf(c_name + "=")
            if (c_start!=-1){
                c_start=c_start + c_name.length+1;
                c_end=document.cookie.indexOf(";",c_start);
                if (c_end==-1) c_end=document.cookie.length;
                return unescape(document.cookie.substring(c_start,c_end));
            }
        }
        return "";
    },
    checkAdCookie:function(){
        var ad201512=ctrl201512AdCookie.getCookie('ad201512');
        if (ad201512==null || ad201512==""){
            $(".img201512ad-min").hide();
            $(".img201512ad-max").slideDown(200);
            setTimeout(function(){
                $(".img201512ad-max").slideUp(1000,function(){
                    $(".img201512ad-min").slideDown(800);
                });
            },2000);
            ctrl201512AdCookie.setCookie('ad201512',"1",365)
        }
    }
}
ctrl201512AdCookie.checkAdCookie();

//下面两个按钮只是为了测试用
$("#button1").click(function(){
    $(".img201512ad-min").hide();
    $(".img201512ad-max").slideDown(200);
    setTimeout(function(){
        $(".img201512ad-max").slideUp(1000,function(){
            $(".img201512ad-min").slideDown(800);
        });
    },2000);
});

//清除所有cookie
$("#button2").click(function(){
    var keys=document.cookie.match(/[^ =;]+(?=\=)/g);
    if (keys) {for (var i = keys.length; i--;)
        document.cookie=keys[i]+'=0;expires=' + new Date( 0).toUTCString()
    }
});

});
</script>
<style type="text/css">
html,body{margin:0;padding:0;}
.main{width:1190px;margin:0 auto;}
.img201512ad{position:relative;height:70px;}
.img201512ad-max{display:none;position:absolute;width:1190px;height:250px;z-index:2;}
.img201512ad-min{display:block;position:absolute;width:1190px;height:70px;z-index:0;}
</style>
</head>
<body>

<div class="main img201512ad">
<img src="1190x250.png" width="1190" height="250" class="img201512ad-max">
<img src="1190x70.png" width="1190" height="70" class="img201512ad-min">
</div>

<div class="main">
<input type="button" value="第1次载入" id="button1">
<input type="button" value="清除cookie" id="button2">
</div>
</body>
</html>

...