这个小例子的要求是：

用户第一次进入，显示大图，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. xdoj 1044---炸红花 （话说 小时候经常玩这个被虐。。。。qwq)

    // 我真的好笨 只会枚举 话说那个ac的370b到底是怎么做的 /(ㄒoㄒ)/~~ #include <iostream> #include <algorithm> usin ...

  2. python--selenium实用的自动生成测试HTML报告方法--HTMLTestRunner

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

  3. centos安装redis +RedisDesktopManager连接redis

    1.先到Redis官网(redis.io)下载redis安装包 wget http://download.redis.io/releases/redis-5.0.4.tar.gztar xzf red ...

  4. 【java规则引擎】《Drools7.0.0.Final规则引擎教程》第4章 4.2 lock-on-active

    转载至:https://blog.csdn.net/wo541075754/article/details/75208955 lock-on-active 当在规则上使用ruleflow-group属 ...

  5. [LeetCode系列] 双单链表共同节点搜索问题

    找到两个单链表的共同节点. 举例来说, 下面两个链表A和B: A: a1 → a2 ↘ c1 → c2 → c3 ↗ B: b1 → b2 → b3 共同节点为c1. 分析: 共同节点距离A,B的起点 ...

  6. netty异步

    通俗理解:http://lingnanlu.github.io/2016/08/16/netty-asyc-callback 异步的小demo:https://blog.csdn.net/coder_ ...

  7. bzoj 4025 二分图——线段树分治+LCT

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4025 线段树分治,用 LCT 维护链的长度即可.不过很慢. 正常(更快)的方法应该是线段树分 ...

  8. 1、zookeeper集群安装

    前提准备3台centos7.0虚拟机 c7003:192.168.70.103 c7004:192.168.70.104 c7005:192.168.70.105 并在三台虚拟机上配置hosts为 1 ...

  9. 几个有用的Linux命令

    原文:http://spin.atomicobject.com/2013/09/09/5-unix-commands/ 本文为原文摘要. 1. man ascii 打印ascii代码表 2. cal ...

  10. aapium 设置安卓机参数

    例子: class iBer(Unittest.TestCase): @classmethod def setUpClass(cls): logger=public.log() desired_cap ...