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. Java之面向对象相关问题集

    面向对象的特征有哪些方面  1.抽象: 抽象就是忽略一个主题中与当前目标无关的那些方面,以便更充分地注意与当前目标有关的方面.抽象并不打算了解所有问题,而仅仅是选择当中的一部分,临时不用部分细节. 抽 ...

  2. [Redux] Extracting Presentational Components -- Todo, TodoList

    Code to be refactored: let nextTodoId = 0; class TodoApp extends Component { render() { const { todo ...

  3. const与define的异同

    1. DEFINE是预处理指令,是简单的文字替换:而const是关键字,用于变量声明的修饰. 2. DEFINE替换的结果可以是数值.表达式.字符串.甚至是一个程序:而const只能限定变量为不可修改 ...

  4. Android调用系统邮件类应用的正确实现方法

    Android应用开发中,很多情况下免不了要调用手机上的邮件类应用,实现邮件发送的功能,这一般是通过调用系统已有的Intent来实现的.看到网上很多邮件发送都是调用action为android.con ...

  5. Android 编程下模拟 HOME 键效果

    Android 应用开发中,有一种场景,就是我们不希望用户按 Back 键直接退出 Activity,而是希望应用隐藏到后台,类似于按 Home 键的效果.参考如下代码即可实现这样的效果: publi ...

  6. 未能加载文件或程序集“System.Web.Extensions, Version=4.0.0.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35”

    最近用vs2012发布程序,然后将更新后的程序文件部署到服务器上,由于服务器上本来有此系统,所以只更新了修改的文件 . 进行系统登录时提示:未能加载文件或程序集“System.Web.Extensio ...

  7. FineUI控件之树的应用(二)

    一.Tree控件应用 <f:PageManager ID="PageManager1" runat="server" /> <f:Tree I ...

  8. iOS的触摸事件

    在iOS中不是任何对象都能处理事件,只有继承了UIResponder的对象才能接收并处理事件,我们称其为@''响应者对象''UIApplication,UIViewController,UIView都 ...

  9. 通过jqueryui实现邮件提示

    //js代码$(function () { var availableTags = ["@qq.com", "@gmail.com", "@126.c ...

  10. CMS设计-组件化

    原来CMS使用的专题类的页面是 : 事先由前端写好完整页面,再交付给运营使用,这样使用的比较灵活,可以根据市场的不同需求由前端切出不同的页面,有时候一旦需求过多,就耽误切图的时间. 现在M和H5采用组 ...