这个小例子的要求是：
用户第一次进入，显示大图，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>
...