这个小例子的要求是：

用户第一次进入，显示大图，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. python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner

    python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner 下面给大家介绍下用HTMLTestRunner模块自动生成测试报告的方法. 一.首先我们导入unit ...

  2. Windows10 解决“装了 .NET Framework 4.5.2/4.6.1/4.7.1等等任何版本 或版本更高的更新”问题

    ========================================================= 系统自带的.net framework版本为4.7,自己安装.NET Framewo ...

  3. test20180919 选择客栈

    题意 分析 不难发现把增加人数看成减少人数,上限是w 看成总数是w,问题就变成了询问有多少个子区间没有0. 考虑这个问题困难在哪里,就是区间加减法让我们不好判断0 的位置. 因为题目保证每个位置的值非 ...

  4. PDFSharp生成PDF （转）

    http://www.cnblogs.com/zhouxin/p/3228108.html 在上面用OpenXML生成word后,原来利用Word2010里的导出成PDF功能就不能用. 然后找开源组件 ...

  5. 实习第二天-今年第一场雨-方法的重载（马上想到println()函数和abs（函数））

    在C语言中 调用函数abs()返回一个整数的绝对值, fabs(返回一个单精度浮点型的绝对值)若要返回这些数的绝对值,则必须记住这些函数的名字 java可以用方法的重载:即是方法名必须相同,参数必须不 ...

  6. citus real-time 分析demo（ 来自官方文档）

      citus 对于多租户以及实时应用的开发都是比较好的,官方也提供了demo 参考项目 https://github.com/rongfengliang/citus-hasuar-graphql 环 ...

  7. stenciljs 学习七 路由

    stenciljs路由类似react router 安装 npm install @stencil/router --save 使用 导入包 import "@stencil/router& ...

  8. Oracle sql之条件语句 循环语句

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

  9. vue-echarts-v3 使用

    github地址:https://github.com/xlsdg/vue-echarts-v3 官方说明:无论多少个组件代码里写 import IEcharts from 'vue-echarts- ...

  10. Server对象，HttpServerUtility类，获取服务器信息

    在Asp.net WebForm中,Server对象是HttpServerUtility类的实例.看下图: 而在Asp.net MVC中,Server对象是HttpServerUtilityBase对 ...