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 除了包括所 ...
随机推荐
- hdu 5012 Dice
Problem Description There are 2 special dices on the table. On each face of the dice, a distinct num ...
- Laravel-表单篇-controller
(慕课网_轻松学会Laravel-表单篇_天秤vs永恒老师_http://www.imooc.com/learn/699) Controller 1.Controller-Request //Requ ...
- Linux gdb调试入门
没有使用过gdb调试过程序的觉得gdb是个很神奇的东东,如果你使用它调试一次保证你想忘记它都难,下面看看它的庐山真面目吧! GDB概述 GDB是GNU开源组织发布的一个强大的UNIX下的程序调试工具. ...
- 【精品】Android游戏类源码大集合
Android自定义效果——随机抽奖 一个模拟抽奖的效果,用户设定若干个选项,添加之后,就可以通过程序,来帮助随机选择其中一项出来.这个类似超市里面那种指针转盘抽奖,run之后是一个动态效果图,初始快 ...
- CodeSmith使用总结--读取一个表试试
我感觉CodeSmith对于我的最大用途是不用我手动创建每个表的Model.BLL和DAL了,那些繁琐的工作真的让我很无语. CodeSmith要读取数据库中的表就要先连接数据库. 新建一个数据库连接 ...
- (转)数据库 distinct 和 group by 的区别
这两者本质上应该没有可比性,distinct 取出唯一列,group by 是分组,但有时候在优化的时候,在没有聚合函数的时候,他们查出来的结果也一样. 举例来说可能方便一点. A表 id num a ...
- redis的5种数据结构的简介
5种数据结构 1.字符串 Redis 字符串是一个字节序列.在 Redis 中字符串是二进制安全的,这意味着它们没有任何特殊终端字符来确定长度,所以可以存储任何长度为 512 兆的字符串. 示例 12 ...
- Merge Sorted Array 合并数组并排序
Given two sorted integer arrays nums1 and nums2, merge nums2 into nums1 as one sorted array. Note:Yo ...
- Python代码一定要对齐
不然会出现错误: IndentationError: unindent does not match any outer indentation level PS:新的Python语法,是不支持的代码 ...
- LeetCode-Divdend two Integers
题目: Divide two integers without using multiplication, division and mod operator. 思路分析 二分法.将除数不断增倍,而结 ...