html页面：

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <link href="css/StyleSheet.css" rel="stylesheet" />

    <script src="../jquery.js"></script>

    <script>

        function time() {

            $t = $("#t").text();

            if ($t!=) {

                $("#t").text($t - ); //广告时间减 1

                $hh = setTimeout("time()", ); //递归，反复调用自己

            }

            else {

                $(".banner").hide();

                $(".btn").show();  //隐藏图片

                $("#t").text();

                clearTimeout($hh);     //清除定时间

            }

        }

        $(function () {

            $(".btn").bind("click", function () {

                $(this).hide();

                $(".banner").show();

                time();

            });

            $(".close").bind("click", function () {

                $(".banner").hide();

                $(".btn").show();

                $("#t").html();

                clearTimeout($hh);

            });

        });

    </script>

</head>

<body>

    <div class="banner">

        <div class="ad"><a><img src="img/ad.jpg" /></a></div>

        <div class="ad_time">广告还剩<span id="t"></span>秒</div>

        <div class="close"></div>

    </div>

    <div class="btn">点击显示广告</div>

</body>

</html>

css:

body {

    font-family:微软雅黑;

    font-size:12px;

}

.banner{

    width:564px;

    height:361px;

    margin:20px auto;

    position:relative;/*让子元素做定位*/

    display:none;

}

.ad_time{

    width:110px;

    height:25px;

    background-color:#;

    color:#fff;

    position:absolute;   /*让倒计时在图片上方显示*/

    top:;

    left:;

    text-align:center;

    line-height:25px;

}

.ad_time span{

    font-weight:bold; color:#cc0; padding: 5px;

}

.close{

     width:49px;

    height:20px;

    position:absolute;

    top:;

    right:;

    background:url(../img/close.png) no-repeat;  //给关闭添加背景图片

    cursor:pointer;

}

.btn{

    width:100px;

    height:30px;

    border:1px solid #ddd;

    background-color:#eee;

    text-align:center;

    line-height:30px;

    margin:20px auto;

    cursor:pointer;

}

JQuery 动画之 广告的更多相关文章

  1. jQuery动画的实现

    没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...

  2. 深入学习jQuery动画控制

    × 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...

  3. 深入学习jQuery动画队列

    前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...

  4. jquery动画，基础以及我发现的新大陆

    $.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...

  5. 让网站动起来！12款优秀的 jQuery 动画插件推荐

    如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...

  6. jQuery动画特效实例教程

    本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下:     <div class="module">   <div cla ...

  7. JQuery动画效果

    jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...

  8. jQuery动画特效笔记

    show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...

  9. Velocity – 另外一款加速的 jQuery 动画插件

    Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...

随机推荐

  1. ipython with ubuntu

    在Linux环境下,其实IDE环境配置比较容易配.所以建议用linux做开发. 首选启动终端:Ctrl+Alt+T sudo apt-get update sudo apt-get install p ...

  2. HADOOP集群监控工具AMBARI

    HADOOP集群监控工具AMBARI安装 Apache Ambari是对Hadoop进行监控.管理和生命周期管理的开源项目.它也是一个为Hortonworks数据平台选择管理组建的项目.Ambari向 ...

  3. World Wind Java开发之十五——载入三维模型

    之前的一篇博客是关于载入粗三维模型的,见http://blog.csdn.net/giser_whu/article/details/43452703,这个地方还存在着不能载入纹理的问题,一直没呢解决 ...

  4. Spark 初级算子

    #常用Transformation(即转换,延迟加载) #通过并行化scala集合创建RDD val rdd1 = sc.parallelize(Array(1,2,3,4,5,6,7,8)) #查看 ...

  5. image即时上传

    function preview_upload(input, img_div_id){ var img_id = img_div_id.replace("itempic_previewDiv ...

  6. jquery商城类封装插件

    自从解决了定时器的问题后,什么都好弄了 这是仿苏宁商城banner的,当然我没弄得那么好啦,但是我想就是那个缩略图,我没弄好吧,方法我猜想是通过把所有li都放进数组,然后通过遍历,就可以做出相应的效果 ...

  7. 单例模式（Singleton）详解——转载

    单例模式(Singleton) 首先来明确一个问题,那就是在某些情况下,有些对象,我们只需要一个就可以了, 比如,一台计算机上可以连好几个打印机,但是这个计算机上的打印程序只能有一个, 这里就可以通过 ...

  8. （转）Javascript面向对象编程（三）：非构造函数的继承（作者：阮一峰）

    不使用构造函数实现"继承". 一.什么是"非构造函数"的继承? 比如,现在有一个对象,叫做"中国人". var Chinese = { na ...

  9. WCF相关

    1.WCF初探-1:认识WCF(概览)2.WCF初探-2:手动实现WCF程序3.WCF精通系列4.无废话WCF系列教程

  10. CODEVS 3138 栈练习2

    3138 栈练习2  时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description (此题与栈练习1相比改了2处:1加强了数据 2不保证栈空时 ...