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 除了包括所 ...
随机推荐
- eclipse java 配置
1.eclipse菜单 - Window - Preferences- Java - Installed JREs 2.eclipse菜单 - Window - Preferences- Java - ...
- python核心编程第二版笔记
python核心编程第二版笔记由网友提供:open168 python核心编程--笔记(很详细,建议收藏) 解释器options:1.1 –d 提供调试输出1.2 –O 生成优化的字节码(生成 ...
- poj 1011 Sticks （DFS+剪枝）
Sticks Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 127771 Accepted: 29926 Descrip ...
- HashMap的存储结构及原理
1.HashMap的数据结构(HashMap通过hashcode对其内容进行高速查找,是无序的) 数据结构中有数组和链表来实现对数据的存储,但这两者基本上是两个极端. 数组 :数组的存储区是连续的,占 ...
- std::remove_if
原型: #include <algorithm>forward_iterator remove_if( forward_iterator start, forward_iterator e ...
- single-row function和muti-row function
1.single-row function 指一行数据输入,返回一个值的函数. 常见的有 字符函数(如:substr) 日期函数(如:months_between) 数字函数(如:MOD) 转换函数( ...
- Stm32高级定时器(四)
Stm32高级定时器(四) 1 编码器接口模式 1.1 编码器原理 什么是正交?如果两个信号相位相差90度,则这两个信号称为正交.由于两个信号相差90度,因此可以根据两个信号哪个先哪个后来判断方向.根 ...
- （转）.net开发者对android开发一周的学习体会
春节期间,相对比较闲,上班时也没什么事情做.利用这一周的时间,简单的学习了一下移动方面的开发.主要是针对android,其实我对IOS更感兴趣 (因为我用iphone),苦于暂时没有苹果电脑,只能把它 ...
- Asp.Net中JSON的序列化和反序列化-----JavaScriptSerializer ,加上自己工作心得
在工作中和手机通信用到web服务和javascriptSerializer,返回json数据,供手机端调用,一开始返回的数据是一大堆,比如 [{"word_picture9":&q ...
- C#中Byte转换相关的函数
1.将一个对象转换为byte对象 public static byte GetByte(object o) { ; if (o != null) { byte tmp; if (byte.TryPar ...