<!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. JSP具体条款——response对象

    response对象 response为响应对象client要求.输出信息到客户.他封装JSP反应生成.发送client在回应client要求. 1.重定向网页 使用response对象的sendRe ...

  2. 绘制一个绿色矩形平面((50, 50)->(350, 350))

    //VS2008+opencv2.4 //绘制一个绿色矩形平面 #include "stdafx.h" #include "highgui.h" #includ ...

  3. 使用SharePoint创建和定义自己的网站页面

    使用SharePoint创建和定义自己的网站页面 1. 打开SharePoint Designer 2010. 2. 点击网站页面导航. 3. 在功能区点击Web部件页面,新建Employee.axp ...

  4. 怎样将short[]数组转换成byte[]数组

    byte[] byteArray = Array.ConvertAll<short, byte>(shortArray, Convert.ToByte);

  5. Team City的安装1

    持续集成工具 Team City的安装 前两个月很大一部分精力投入在做部门的持续集成,从概念的了解和工具的选型,再到安装,部署,操作,到最后的真实项目持续集成应用的上线,写了一份手册,包括安装,配置, ...

  6. linux Packet socket (1)简单介绍

    本文主要来自于linux自带的man packet手冊: http://man7.org/linux/man-pages/man7/packet.7.html 平时常常使用的INET套接字提供的是7层 ...

  7. NPOI 的使用心得

    Excel 数据  通过 c# 代码逻辑 导入 到数据库  . 其中各种坑爹.原因是 单元格 数据 与 数据库 字段的数据类型 会有出入.因为 Excel 是人工输入. 比如 一个单元格  本来 只能 ...

  8. AngularJS应用开发思维之3：依赖注入

    找不到的API? AngularJS提供了一些功能的封装,但是当你试图通过全局对象angular去 访问这些功能时,却发现与以往遇到的库大不相同. $http 比如,在jQuery中,我们知道它的AP ...

  9. 专访雷水果国：离1.5K至18K 一个程序猿5每年的成长之路

    我只是一个小菜鸟,对于自主学习和交流PHP(jquery,linux,lamp,shell,javascript,server)等一系列的知识.小菜鸟创建了一个群.希望光临本博客的人能够进来交流. 寻 ...

  10. 兔子--gradle安装和配置

    1.下载gradle,下载--all的这个 点击进入下载页 2.下载下来后,解压.配置环境变量. 编辑path , ....;G:\soft\gradle-2.2.1-all\gradle-2.2.1 ...