JQuery 动画之 广告
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 动画之 广告的更多相关文章
- jQuery动画的实现
没有引入deferred机制,其余流程都有了 //////////// //创建动画缓动对象 // //////////// function Tween(value, prop, animation ...
- 深入学习jQuery动画控制
× 目录 [1]动画状态 [2]停止动画 [3]动画延迟[4]全局控制 前面的话 jQuery动画可以使用fade.hide.slide等方法实现基本动画效果,可以使用animate实现自定义动画,甚 ...
- 深入学习jQuery动画队列
前面的话 队列实现是jQuery非常棒的一个拓展,使用动画队列可以使动画更容易实现.本文将详细介绍jQuery动画队列 queue() queue()方法用来显示在匹配的元素上的已经执行的函数队列 q ...
- jquery动画，基础以及我发现的新大陆
$.animate()在jquery官方介绍有2中方式,其实我发现的新大陆也是第二种方式的扩展! 一.$.animate( properties [, duration ] [, easing ] [ ...
- 让网站动起来！12款优秀的 jQuery 动画插件推荐
如今,大多数设计师和开发人员被要客户要求开发动态的网站.创造视觉震撼和醒目的动态网站是艰巨的任务,因为它需要大量的努力和创造力.在网络上有大量的工具和插件可用于创建网站动画.许多开发人员正在使用 HT ...
- jQuery动画特效实例教程
本文以实例形式详细讲述了jQuery动画特效的实现方法. 1.自制折叠内容块 内容块如下: <div class="module"> <div cla ...
- JQuery动画效果
jquery动画效果常用方法 1.show()显示效果语法:show(speed,callback)Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slo ...
- jQuery动画特效笔记
show().hide().fadeIn().fadeOut().slideDown.slideUp.slideToggle()都接受可选的时长和回调参数(选项对象参数). toggle(durati ...
- Velocity – 另外一款加速的 jQuery 动画插件
Velocity 是一款 jQuery 插件,重新实现了 $.animate() 方法,提供更高的性能(比 CSS 动画还更快),同时包括一些新的功能,以改进动画工作流程.Velocity 除了包括所 ...
随机推荐
- VSCode
下载: 打开终端控制器 wget http://download.microsoft.com/download/0/D/5/0D57186C-834B-463A-AECB-BC55A8E466AE/V ...
- jquery.tochart.js
var _jq, _hc; var jqsrc = "http://code.jquery.com/jquery-1.7.min.js"; var hcsrc = "ht ...
- 5狐网教你从零基础做Firefox os 手机应用开发赚money
如果你还没有接触过web编程,这里有基础教程教你怎样一步一步学习开发,如果你已经是一个web编程基础的人,那你就很容易将web编程放到手机上,轻松教你移植web应用游戏到Firefox手机应用再发布到 ...
- 通向码农的道路（enet开源翻译计划 一）
QQ 324186207群 enet交流技术.主要是为了研究tcp内部执行机制,欢迎大家增加探讨.小弟水平有限.翻译难免有误. . Features: ENet evolved specificall ...
- MessageDigest 类
MessageDigest 类 MessageDigest 类是一个引擎类,它是为了提供诸如 SHA1 或 MD5 等密码上安全的报文摘要功能而设计的.密码上安全的报文摘要可接受任意大小的输入( ...
- LAMP架构搭建+Discuz论坛搭建【weber出品必属精品】
一. 本机简介: 本机系统: CentOS-6.4-x86_64 主机名:oracle.ywb IP地址:192.168.146.129 二. 在Linux环境下安装Apache步骤 ...
- bootstrap小结
bootstrap总结 bootstrap总结 base css 我分为了几大类 1,列表 .unstyled(无样式列表),.dl-horizontal(dl列表水平排列) 2,代码 code(行级 ...
- SDOI HH的项链 HEOI采花
题目大意: SDOI求一个区间内只出现一次的数的个数.多组询问. HEOI 求一个区间内出现至少两次的数的个数.多组询问. SDOI HH'neckplace如果每次询问都是1..r的话,那么我们只要 ...
- 慕课linux学习笔记（四）常用命令（1）
Root 表示当前登录用户 Localhost 主机名 ~ 当前所在位置(~表示/root) # 超级用户 $ 普通用户 命令 1.pwd 显示当前所在位置 2.ls 查询目录中的内容 -a 显示所有 ...
- Altium Designer 生成 Mach3 G代码的程序
Altium Designer做PCB设计,还是很方便的,最近头脑发热,在网上买了一套CNC机床,用来做钻孔用,但是翻来翻去,基本上所有的软件都是铣削功能,而且很多软件很复杂.翻了好几天,发现没有什么 ...