这个小例子的要求是：

用户第一次进入，显示大图，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>

...

代码：cookie（一个广告展示例子）的更多相关文章

  1. 跨站脚本功攻击，xss，一个简单的例子让你知道什么是xss攻击

    跨站脚本功攻击,xss,一个简单的例子让你知道什么是xss攻击 一.总结 一句话总结:比如用户留言功能,用户留言中写的是网页可执行代码,例如js代码,然后这段代码在可看到这段留言的不同一户的显示上就会 ...

  2. RTB广告展示分步说明

    原文:http://contest.ipinyou.com/cn/manual.shtml RTB (Real Time Bidding, 实时竞价) 是近年来计算广告领域最激动人心的进展之一. 它增 ...

  3. 用XAML做网页！！—广告展示区

    原文:用XAML做网页!!-广告展示区 此次我们来进行广告展示区块的制作. 首先在Show区块中去掉原来设置的背景色,加入新的渐变背景设定: <Grid.Background> <L ...

  4. iOS回顾笔记（05） -- 手把手教你封装一个广告轮播图框架

    html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,bi ...

  5. 扩展Python模块系列(二)----一个简单的例子

    本节使用一个简单的例子引出Python C/C++ API的详细使用方法.针对的是CPython的解释器. 目标:创建一个Python内建模块test,提供一个功能函数distance, 计算空间中两 ...

  6. 只用120行Java代码写一个自己的区块链-3挖矿算法

    在本系列前两篇文章中,我们向大家展示了如何通过精炼的Java代码实现一个简单的区块链.包括生成块,验证块数据,广播通信等等,这一篇让我们聚焦在如何实现 PoW算法. 大家都无不惊呼比特币.以太坊及其他 ...

  7. 《Java从入门到失业》第四章：类和对象（4.3）：一个完整的例子带你深入类和对象

    4.3一个完整的例子带你深入类和对象 到此为止,我们基本掌握了类和对象的基础知识,并且还学会了String类的基本使用,下面我想用一个实际的小例子,逐步来讨论类和对象的一些其他知识点. 4.3.1需求 ...

  8. 通过 Mesos、Docker 和 Go，使用 300 行代码创建一个分布式系统

    [摘要]虽然 Docker 和 Mesos 已成为不折不扣的 Buzzwords ,但是对于大部分人来说它们仍然是陌生的,下面我们就一起领略 Mesos .Docker 和 Go 配合带来的强大破坏力 ...

  9. jQuery手风琴广告展示插件

    效果说明:当鼠标移动到已折叠广告的标题后,折叠当前已展开的广告,并同步展开相应的折叠广告.这种Accordion效果,看似简单,但因为存在动画同步的问题,不能简单地用两个animate()来实现.必须 ...

随机推荐

  1. jenkins构建配置

    # Poll SCM:定时检查源码变更(根据SCM软件的版本号),如果有更新就checkout最新code下来,然后执行构建动作 # 每5分钟检查一次源码变化 # Build periodically ...

  2. 【网络通讯】Nat知识了解

    一.Nat的含义 NAT(Network Address Translation,网络地址转换)是1994年提出的.当在专用网内部的一些主机本来已经分配到了本地IP地址(即仅在本专用网内使用的专用地址 ...

  3. exec函数簇

    转自:http://www.cppblog.com/prayer/archive/2009/04/15/80077.html 也许有不少读者从本系列文章一推出就开始读,一直到这里还有一个很大的疑惑:既 ...

  4. selinux操作

    setenforce 0 关闭SELinux setenforce 1 临时打开SELinux getenforce 查看SELinux状态 永久关闭SELinux : # cat /etc/seli ...

  5. http-equiv 了解

    META标签是HTML语言HEAD区的一个辅助性标签,它位于HTML文档头部的<HEAD>标记和<TITLE>标记之间,它提供用户不可见的信息.meta标签通常用来为搜索引擎r ...

  6. 【模式识别】MPL,MIL和MCL

    Multi-Instance Learning (MIL) 和Multi-Pose Learning (MPL)是CV的大牛Boris Babenko at UC San Diego提出来的.其思想能 ...

  7. Spring本质-AOP

    一.我们在做系统设计的时候,一个非常重要的工作就是把一个大系统做分解, 按业务功能分解成一个个低耦合.高内聚的模块,就像这样: 但是分解以后就会发现有些很有趣的东西, 这些东西是通用的,或者是跨越多个 ...

  8. FineUI 选中多行获取行ID

    http://www.fineui.com/bbs/forum.php?mod=viewthread&tid=2506&page=1 /// <summary>       ...

  9. C# Request.Params与Request.QueryString 的区别

    1.Request.Params包含Request.QueryString,request.form.request.cookies和request.servervariables.这几种查找的时候会 ...

  10. jar包引用版本不一致引发的问题

    前几天升级了一个模块的小补丁后,现网出了个问题,调用一个底层接口,获取到的返回对象一直是空的.诡异的是该模块本次升级的补丁内容并不涉及这个接口相关的东西,或者也可以说,补丁就是改了极其简单的一行代码而 ...