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. python倒计时

    #coding=utf-8 #!/usr/bin/env python import datetime,time i=3 while i==3: spring=datetime.datetime(20 ...

  2. python socket学习

    import socket localip=socket.gethostbyname(socket.gethostname()) print (localip) iplist=socket.getho ...

  3. JMeter简单性能测试（适合初学者）

    利用JMeter进行Web测试     JMeter介绍    脚本录制    运行JMeter进行测试    JMeter主要组件介绍    参数化设置    动态数据关联    使用命令行运行JM ...

  4. Win32多线程编程(3) — 线程同步与通信

      一．线程间数据通信 系统从进程的地址空间中分配内存给线程栈使用.新线程与创建它的线程在相同的进程上下文中运行.因此,新线程可以访问进程内核对象的所有句柄.进程中的所有内存以及同一个进程中其他所有线 ...

  5. vue 使用总结

    1.Vuejs组件 vuejs构建组件使用 Vue.component('componentName',{ /*component*/ }): 这里注意一点,组件要先注册再使用,也就是说: Vue.c ...

  6. dataset导出成excel

    之前网上查找了很多关于这类的代码.要不是中文乱码,要不是就是太复杂.这个是我用过最好用的. //ds为数据源,filename为保存的文件名 publicvoidCreateExcel(DataSet ...

  7. html中行内元素与块级元素的区别。

    在标准文档流里面,块级元素具有以下特点 1.总是在新行上开始,占据一整行: 2.高度,行高以及外边框和内边距都可以控制: 3.宽度始终是与游览器宽度一样,与内容无关: 4.它可以容纳内联元素和其他块级 ...

  8. hdu4296 贪心

    E - 贪心 Crawling in process... Crawling failed Time Limit:2000MS     Memory Limit:32768KB     64bit I ...

  9. shell编程-1到100的求和与冒泡排序

    Shell编程 一.  for循环 生成列表 {起始数..结束数} 命令生成列表 `seq [起始数] [步进长度] 结束数 ` for  l in {1..5};do for  l in `seq ...

  10. 【android】修改android默认应用图标

    我自己做的一个小程序,想更改程序安装后的默认显示图片,但是我发现只能改一次,以后再改还是显示第一次更改后的图片(此时我已把最后一次更改前的全部图片都删除了,所以不会是名称填错),这是为什么??求高人指 ...