jquery 实现飘落效果
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹球特效</title>
<script type="text/javascript" src="Scripts/jquery-1.8.2.min.js"></script>
<style type="text/css">
.ball{
width:50px;
height:50px;
border-radius:100%;
position:absolute;
opacity:0;}
</style>
</head>
<body>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
<img class="ball" src="Images/ball/hongxin.png" class="ball"/>
</body>
</html>
<script type="text/javascript">
var pageHeight = $(window).height();
var pageWidth = $(window).width();
var constHeight = pageHeight - 100;
var constWidth = pageWidth - 100;
var randomWidth;
var delayTime;
var animateCount;
$(function(){
setInterval(CheckElement,1);
}) function CheckElement(){
animateCount = $(".ball:not(:animated)").length;
if(animateCount > 0)
Auto();
} function Auto(){
$(".ball:not(:animated)").each(function(){
delayTime = Math.random()*3000;
randomWidth = Math.random()*constWidth;
$(this).css("left",randomWidth).delay(delayTime).animate({top:constHeight,opacity:1,width:100,height:100},5000,"linear")
.animate({top:constHeight/1.8,opacity:0,width:150,height:150},3000,"linear")
.animate({top:0,width:0,height:0},1,"linear")
})
}
</script>
关键函数:1.setInterval(CheckElement,1);每隔一段时间执行某个方法。
2.Math.random();（此函数是随机获取0-1之间的数）。
3.$("").delay()延时
4.$("").animate()执行动画
熟悉应用以上函数，可以实现很多其他效果，自由落体，弹球，飘雪，下雨等效果，以下是类似落叶效果
jquery 实现飘落效果的更多相关文章
- 简单说 JavaScript实现雪花飘落效果
说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- JQuery实现广告效果（滚动切换）
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- js实现雪花飘落效果的代码
使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
随机推荐
- NET 领域驱动设计实战系列总结
NET 领域驱动设计实战系列总结 一.引用 其实在去年本人已经看过很多关于领域驱动设计的书籍了,包括Microsoft .NET企业级应用框架设计.领域驱动设计C# 2008实现.领域驱动设计:软件核 ...
- [WF4.0 实战] WPF + WCF + WF 打造Hello World（基础篇）
本篇博客是一个基础的演示样例,也就是一个新手教程吧!让大家熟悉一下WPF + WCF + WF三者的关系!这仅仅是一个基础篇,下篇会继续深入,作为这段时间研究工作流的一个小小总结! 三者关系: WPF ...
- Eddy's mistakes（字母大小写转换）strlwr函数的应用
Problem Description Eddy usually writes articles ,but he likes mixing the English letter uses, for ...
- 细说 ASP.NET Cache 及其高级用法【转】
阅读目录 开始 Cache的基本用途 Cache的定义 Cache常见用法 Cache类的特点 缓存项的过期时间 缓存项的依赖关系 - 依赖其它缓存项 缓存项的依赖关系 - 文件依赖 缓存项的移除优先 ...
- 6天通吃树结构—— 第五天 Trie树
原文:6天通吃树结构-- 第五天 Trie树 很有段时间没写此系列了,今天我们来说Trie树,Trie树的名字有很多,比如字典树,前缀树等等. 一:概念 下面我们有and,as,at,cn,com这些 ...
- 关于微软公有云Azure会计标准
前几年.中国的云计算项目往往搞成了房地产项目.大搞形"象project",没有实质性的内容.云计算老总成了房地产大老板,国内业界是在胡闹! 现今,世纪互联与微软(中国)联手搞公有云 ...
- Codeforces Round #243 (Div. 1)-A,B,C-D
此CF真是可笑.. . 由于早晨7初始点,因此,要做好CF时间已经17没有休息一小时,加上中午5小时耐力赛. 心里很清楚.是第一个问题的时候,几乎被解读为寻求最大的领域和.然后找到一个水体,快速A降. ...
- 【百度地图API】除夕夜，大家一起来赶走“夕”——删除标注功能
原文:[百度地图API]除夕夜,大家一起来赶走"夕"--删除标注功能 任务描述: 农历12月31日是中国传统的节日——除夕.你知道除夕是怎么来的麼? “夕”在中国古代神话中,可是一 ...
- 2. SQL Server数据库状态监控 - 错误日志
原文:2. SQL Server数据库状态监控 - 错误日志 无论是操作系统 (Unix 或者Windows),还是应用程序 (Web 服务,数据库系统等等) ,通常都有自身的日志机制,以便故障时追溯 ...
- php 链接中加参数传递
原文:php 链接中加参数传递 php链接中加参数是在源链接中加"?",问号之后就可以跟参数列表,para1=value1¶2=value2¶3=v ...