<!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. c#有关udp可靠传输(包传输数据包) 升级

    在c#有关udp可靠传输(包传输数据包)我们讨论,UDP包的发送,可是上一个程序有一个问题.就是数据比較大.一个Message类序列化后都有2048B,而实际的数据量也就只是 50B罢了,这就说明当中 ...

  2. ftp设置（2015-04-04）[转]

    anonymous_enable=YES /允许匿名访问 12行local_enable=YES /允许本地用户访问(/etc/passwd中的用户) 15行write_enable=YES /允许写 ...

  3. Ubuntu通过使用PyCharm 进行调试 Odoo 8.0 可能出现的问题

    实现步骤,请移步http://shine-it.net/index.php?topic=16603.0 要么 http://www.mindissoftware.com/2014/09/11/Run- ...

  4. hdu 质方数

    Problem Description   小明天生对数字比较敏感,3岁的时候就能背诵圆周率一百位. 现在,小明慢慢长大了,但依然很喜欢数字,最近,他迷上了质数和平方数,并且自己把质数的平方命名为“质 ...

  5. Office——检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败

    检索 COM 类工厂中 CLSID 为 {000209FF-0000-0000-C000-000000000046} 的组件时失败,原因是出现以下错误: 8000401a 1.运行dcomcnfg.e ...

  6. hardware_hp存储映射_方案

    修改虚拟磁盘映射方式 每个刀片独立对应映射存储空间 这样就不会造成数据写入冲突, old new 步奏: 创建过程  lun号码  1-155 之间 第二步奏 最后 指定: 就ok了 2012年12月 ...

  7. [LeetCode]N-Queens 八皇后问题扩展（经典深层搜索）

    The n-queens puzzle is the problem of placing n queens on an n×n chessboard such that no two queens ...

  8. Topcoder SRM 628 DIV 2

    被自己蠢哭了.... 250-point problem 国际象棋棋盘上给出两个坐标,问象从一个走到还有一个最少要几步. 黑格象仅仅能走黑格,白格象仅仅能走白格,仅仅要推断两个坐标的颜色是否同样就能推 ...

  9. C语言 ## __VA_ARGS__ 宏

    在GNU C中,宏可以接受可变数目的参数,就象函数一样 可以把__VA_ARGS__看成是将...赋值给该宏 //注意这里不能在函数中调用abc() #include <stdio.h> ...

  10. 怎样选择PHP的版本

    原文:怎样选择PHP的版本 IIS 如果想使用IIS配置PHP的话,那么需要选择Non-Thread Safe(NTS)版本的PHP Apache 如果你是用的Apache的版本来自Apache Lo ...