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. Javascript:一个优雅的时钟

    实现效果: 准备工作: 1# 定时器 相关知识了解 2#javascript Date(日期)对象 3# 准备效果所用图片 实现原理: 1# 获取当前时间: var time=new Date(); ...

  2. 响应式布局：Flexbox应用总结

    距离上篇文章<布局神器:Flexbox>的发表已有一周时间,转眼这周又到了周五(O(∩_∩)O~~): 习惯性在周五对自己的一周工作进行下总结,记录下这周值得被纪念的工作事件,无论是好的, ...

  3. 分享一个option样式传递给select当前选中样式

    今天遇到一个很是纠结的问题,需求又改了!原生的select给option加样式,结果发现select选中仍是默认样式,如下图:

  4. Filter过滤器实现登录检查

    主要利用filter过滤掉未经登录而直接跳转到非登录访问页面.代码而言的话并不难,只是有几点问题需要注意一下. 1.使用filter需要配置web.xml,如果是/*那么在拦截后的页面会连带jsp页面 ...

  5. 理清fineuploader无刷新上传的一些事

    1.fineuploader是一款不依赖与jquery的异步无刷新上传组件,fineuploader采用ajax方式实现对文件上传,返回值都是以json的格式,对后台服务器操作和前端dom对象一些操作 ...

  6. win7 安装vs2010报错 Error code -939523550 for this component is not recognizedHi

    When i try to install VS2010, Its not installing. I'm getting an error.  It just try to install the ...

  7. angular 指令梳理 —— 前端校验

    angular js内置校验的扩展 校验成功则 scope.formName.$valid=true 校验失败  元素的class: ng-invalid 成功:.ng-valid /** * 校验指 ...

  8. 6 log4j -- 一个笨的使用方法

    log4j的说明: Log4j是Apache的一个开源项目,通过使用Log4j,我们可以控制日志信息输送的目的地是控制台.文件.GUI组件,甚至是套接口服务器.NT的事件记录器.UNIX Syslog ...

  9. C#将十六进制的文本转换到整型数据

    1 length1 = Int32.Parse(szLine.Substring(1, 2), System.Globalization.NumberStyles.HexNumber);//计算这一行 ...

  10. html label 标签的 for 属性

    如果您在 label 元素内点击文本,就会触发此控件.就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上. 有两种使用方法: 方法1 使用for属性 <label for ...