<!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 实现飘落效果的更多相关文章

  1. 简单说 JavaScript实现雪花飘落效果

    说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...

  2. jQuery实现放大镜效果

    1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...

  3. jquery左右滑动效果的实现

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 仿jQuery的siblings效果的js原生代码

    仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...

  5. JQuery实现广告效果（滚动切换）

    JQuery实现广告效果(滚动切换)   Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...

  6. js实现雪花飘落效果的代码

    使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...

  7. 16个最棒的jQuery视差滚动效果教程

    今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...

  8. jQuery之动画效果show()......animate()

    jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...

  9. jquery特效 幻灯片效果

    jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...

随机推荐

  1. Java数据结构与算法(20) - ch08树

    树的主要算法有插入,查找,显示,遍历,删除,其中显示和删除略微复杂. package chap08.tree; import java.io.BufferedReader; import java.i ...

  2. printf 对齐

      printf关于对其的问题(参考有关博客加上自己的一些总结) 1.关于左对齐或右对齐问题, 默认的如果%后没有“-”是右对齐的,如果%后跟“0”,不足的个数用0来填充, 例如:printf(&qu ...

  3. gets、scanf和getchar之间的区别

    gets gets.scanf和getchar之间的区别 1. gets函数读取数据时,接受的数据包括数据和回车符.即:读取数据后输入流没有输入 操作动作. 2. scanf函数读取数据时,接受的数据 ...

  4. javascript/jquery读取和修改HTTP headers

    javascript/jquery读取和修改HTTP headers jquery修改HTTP headers jQuery Ajax可以通过headers或beforeSend修改request的H ...

  5. 在LINQ中实现多条件联合主键LEFT JOIN

    我昨天遇到一个LINQ下使用多条件比对产生LEFT JOIN的问题,经过深入研究,终于解决了,也让我学到了新的东西,特地拿来分享. 实例:有一张库存异常变更视图KCYD,仓库ID[Ckid]和物品ID ...

  6. 【Android接口实现】PhotoView——单点支持/多图像缩放，实现了触摸

    转载请注明出处:http://blog.csdn.net/zhaokaiqiang1992 今天给大家介绍的开源项目,是来自Github的PhotoView项目,这个项目的主要功能是实现普通的Imag ...

  7. node.js高效操作mongodb

    node.js高效操作mongodb Mongoose库简而言之就是在node环境中操作MongoDB数据库的一种便捷的封装,一种对象模型工具,类似ORM,Mongoose将数据库中的数据转换为Jav ...

  8. 第一个JavaWeb程序

    转载 第一个JavaWeb程序 JavaWeb学习总结第二篇—第一个JavaWeb程序 最近我在学院工作室学习并加入到研究生的项目中,在学长学姐的带领下,进入项目实践中,为该项目实现一个框架(用已有框 ...

  9. Asp.net MVC + EF + Spring.Net 项目实践3

    Asp.net MVC + EF + Spring.Net 项目实践 这一篇要整合Model层和Repository层,提供一个统一的操作entity的接口层,代码下载地址(博客园上传不了10M以上的 ...

  10. python元类分析

    刚開始接触到Python新式类中的元类的概念的时候非常是纠结了下..不知道这是个啥东西... 用下面几个定义来说明吧: (1)Python中,类也是对象..仅仅只是这样的对象比較的特殊,他用于创建别的 ...