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. hdu 5012 Dice

    Problem Description There are 2 special dices on the table. On each face of the dice, a distinct num ...

  2. Laravel-表单篇-controller

    (慕课网_轻松学会Laravel-表单篇_天秤vs永恒老师_http://www.imooc.com/learn/699) Controller 1.Controller-Request //Requ ...

  3. Linux gdb调试入门

    没有使用过gdb调试过程序的觉得gdb是个很神奇的东东,如果你使用它调试一次保证你想忘记它都难,下面看看它的庐山真面目吧! GDB概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具. ...

  4. 【精品】Android游戏类源码大集合

    Android自定义效果——随机抽奖 一个模拟抽奖的效果,用户设定若干个选项,添加之后,就可以通过程序,来帮助随机选择其中一项出来.这个类似超市里面那种指针转盘抽奖,run之后是一个动态效果图,初始快 ...

  5. CodeSmith使用总结--读取一个表试试

    我感觉CodeSmith对于我的最大用途是不用我手动创建每个表的Model.BLL和DAL了,那些繁琐的工作真的让我很无语. CodeSmith要读取数据库中的表就要先连接数据库. 新建一个数据库连接 ...

  6. (转)数据库 distinct 和 group by 的区别

    这两者本质上应该没有可比性,distinct 取出唯一列,group by 是分组,但有时候在优化的时候,在没有聚合函数的时候,他们查出来的结果也一样. 举例来说可能方便一点. A表 id num a ...

  7. redis的5种数据结构的简介

    5种数据结构 1.字符串 Redis 字符串是一个字节序列.在 Redis 中字符串是二进制安全的,这意味着它们没有任何特殊终端字符来确定长度,所以可以存储任何长度为 512 兆的字符串. 示例 12 ...

  8. Merge Sorted Array 合并数组并排序

    Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...

  9. Python代码一定要对齐

    不然会出现错误: IndentationError: unindent does not match any outer indentation level PS:新的Python语法,是不支持的代码 ...

  10. LeetCode-Divdend two Integers

    题目: Divide two integers without using multiplication, division and mod operator. 思路分析 二分法.将除数不断增倍,而结 ...