<!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. 使用 CXF 做 webservice 简单例子[转]

    Apache CXF 是一个开放源代码框架,提供了用于方便地构建和开发 Web 服务的可靠基础架构.它允许创建高性能和可扩展的服务,您可以将这样的服务部署在 Tomcat 和基于 Spring 的轻量 ...

  2. linux_java_redis_postgresql_常用命令

     redis 常用语法telnet 192.168.18.210 6379keys *llen队列名称llen 队列名称 postgresql常用语法psql -h192.168.18.210 -Up ...

  3. java_软件发布版本_Asynch HttpClien 对比发行版本说明_Alpha、Beta、RC、GA版本的区别

    今天看了一天的apache 的httpasyncclient ,为了和默认的httpclient做个对比,httpcore是核心轻量级的提供传统阻塞IO 和 java NIO两种方式,httpclie ...

  4. jquery跨域请求解决方案（我们寻找，我还没有添加验证）

    http://www.3lian.com/edu/2014/02-10/127921.html 本篇文章仅仅要是对jquery ajax跨域解决方法(json方式)进行了介绍,须要的朋友能够过来參考下 ...

  5. 使用php-fpm状态页观察当前的php-fpm状态

    对于php-fpm的參数设置,非常多情况下有这种疑问,就是内置的几个參数比如pm.max_children,pm.start_servers等这几个參数究竟该设置最多为多少才合适.事实上这几个參数往往 ...

  6. Linux_下安装MySQL

    linux下mysql 最新版安装图解教程 1.查看当前安装的linux版本 命令:lsb_release -a 如下图所示 通过上图中的数据可以看出安装的版本为RedHat5.4,所以我们需要下载R ...

  7. jquery_mobile.js+html5+css3打造手机平板等各种效果

    http://www.w3school.com.cn/jquerymobile/jquerymobile_events_orientation.asp

  8. IOS程序创建view

    在IOS程序中创建view有六种方式 首先创建一个GLViewController类,继承UIViewController. 然后进入GLAppDelegate.m,在- (BOOL)applicat ...

  9. Mac OS下SVN的使用：服务的和客户端

    在Windows环境中,我们一般使用TortoiseSVN来搭建svn环境.在Mac环境下,由于Mac自带了svn的服务器端和客户端功能,所以我们可以在不装任何第三方软件的前提下使用svn功能,不过还 ...

  10. java设计模式之九外观模式（Facade）

    外观模式是为了解决类与类之家的依赖关系的,像spring一样,可以将类和类之间的关系配置到配置文件中,而外观模式就是将他们的关系放在一个Facade类中,降低了类类之间的耦合度,该模式中没有涉及到接口 ...