这个小例子的要求是：

用户第一次进入，显示大图，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. HihoCoder - 1789：阶乘问题 （简单数学）

    描述 给定 n, k,求一个最大的整数 m,使得 km 是 n! 的约数 输入 第一行两个正整数 n, k 2 ≤ n,k ≤ 109 输出 输出最大的 m 样例输入 5 2 样例输出 3 思路:我们 ...

  2. zookeeper 入门指导

      zookeeper数据模型 zookeeper有一个层级命名空间,和一个分布式文件系统非常相似 .唯一的不同是每个节点可以有关联的数据,子节点也是.就像有一个文件系统,并且允许文件可以是一个目录. ...

  3. 生成html报告并整合自动发动邮件功能

    from HTMLTestRunner import HTMLTestRunnerfrom email.mime.text import MIMETextfrom email.header impor ...

  4. 【poj3169】【差分约束+spfa】

    题目链接http://poj.org/problem?id=3169 题目大意: 一些牛按序号排成一条直线. 有两种要求,A和B距离不得超过X,还有一种是C和D距离不得少于Y,问可能的最大距离.如果没 ...

  5. Python类之魔术方法

    一.什么是魔术方法? 在Python的方法,我们经常会遇见__XXX__(),这样的方法,我们一般称为"魔术方法",赶紧搬个小板凳,我们一起来看看魔术方法有啥神奇的地方,这些方法又 ...

  6. WPF控件NumericUpDown (转)

    WPF控件NumericUpDown示例 (转载请注明出处) 工具:Expression Blend 2 + Visual Studio 2008 语言:C# 框架:.Net Framework 3. ...

  7. MySQL--查询表统计信息

    ============================================================= 可以用show table status 来查看表的信息,如:show ta ...

  8. 监控分析——Web中间件

    发现 中间件监控看是否有性能瓶颈 核心:主要看中间件的线性池进程池有没有排队情况,请求是否处理及时就OK Apache 以前php都是用apache,现在基本用nginx了. 首先自己启动apache ...

  9. 嵌入式Linux软件工程师面试题一

    题一,同步和异步有啥区别? 题二,TCP与UDP有啥区别? 题三,进程和线程有啥区别? 题一答案: 同步(Sync):所有的操作都做完,才返回给用户.这样用户在线等待的时间太长,给用户一种卡死了的感觉 ...

  10. BitKeeper 和 Git

    在 2002 年到 2005年, Linux 内核使用 BitKeeper 管理代码. BitKeeper 的 CEO 和 Linus 曾经是好友. 在 Git 诞生 11年后 BitKeeper 宣 ...