这个小例子的要求是：

用户第一次进入，显示大图，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. Oracle sql之条件语句 循环语句

    一 IF..THENIF condition THEN   statements 1;   statements 2;   ....END IF; 二 IF..THEN...ELSEIF condit ...

  2. 使用VBS发邮件

    NameSpace = "http://schemas.microsoft.com/cdo/configuration/"set Email = CreateObject(&quo ...

  3. junit 知识点

    JUnit 测试框架具有以下重要特性: 测试工具 测试套件 测试运行器 测试分类 测试工具 测试工具是一整套固定的工具用于基线测试.测试工具的目的是为了确保测试能够在共享且固定的环境中运行,因此保证测 ...

  4. FineUI 选中多行获取行ID

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

  5. go test 初始化--- TestMain的使用

    go test 功能,提高了开发和测试的效率. 有时会遇到这样的场景: 进行测试之前需要初始化操作(例如打开连接),测试结束后,需要做清理工作(例如关闭连接)等等.这个时候就可以使用TestMain( ...

  6. 【python】序列切片和range函数

    序列的每个元素都可以用2种索引的表达方式,一种是正数索引,另一种是负数索引. 序列切片,作用是访问序列中一定范围的元素,格式“序列名[A:B]”,其中A为所切片的第一个元素的索引号,而B为切片后剩下的 ...

  7. python findall() re.S

    官方文档:https://docs.python.org/3.6/library/re.html 教程:http://www.regexlab.com/zh/regref.htm re.findall ...

  8. Maven基本使用

    Maven基本使用 一.安装 先去官网下载maven(http://maven.apache.org/download.cgi) 下载下来解压后如下所示  配置环境变量   查看配置成功与否  mav ...

  9. 微信小程序之for循环

    在微信小程序中也有for循环,用于进行列表渲染. 官方实例 打开微信开发者文档,在框架部分的视图层-->wxml-->列表渲染中可以看到官方给出的for循环实例,在实例中 可以看到下面相关 ...

  10. C++基本规则

    C++ 程序结构 让我们看一段简单的代码,可以输出单词 Hello World. #include <iostream> using namespace std; // main() 是程 ...