<!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. .NET中Redis安装部署及使用方法简介

    一Redis服务端以服务方式运行 修改端口压缩文件中配置的是6488 修改密码 修改库的数量 工具配置安装后如下图 二Redis服务端以控制台方式运行 第一步配置本地服务 第二部安装和配置客户端 三C ...

  2. .NET缓存框架CacheManager---1、CacheManager的介绍

    在我们开发的很多分布式项目里面(如基于WCF服务.Web API服务方式),由于数据提供涉及到数据库的相关操作,如果客户端的并发数量超过一定的数量,那么数据库的请求处理则以爆发式增长,如果数据库服务器 ...

  3. Codeforces548D:Mike and Feet(单调栈)

    Mike is the president of country What-The-Fatherland. There are n bears living in this country besid ...

  4. ToDictionary() and ToList()

    ToDictionary() and ToList() 前言: 有两个简单好用的LINQ扩展方法 ToDictionary() 和ToList(),你可能知道或不知道,但是它的的确确可以简化查询转化为 ...

  5. Asp.Net+Easyui实现重大CRUD

    今天周四称,这应该给自己一个休息,好好休息休息,但无奈自己IT这是痴迷.甘心的想加加班把目标功能实现,功夫不负有心人.经过6个小时的鏖战,我最终成功了. 在此和大家分享下成果,希望大家给个赞. 我的目 ...

  6. 怎样用LINQ或EF生成NOT IN和IN语句

    例如:有一个问卷表Questionnaire和一个活动与问卷的关系表ActivityOption_Questionnaire,现在我们要找出不在活动中的问卷. 用lambda实现方法如下: var n ...

  7. winform 实现选择的城市名单

    首先在地图上 #region 选择城市 /// <summary> /// 点击字母事件 /// </summary> /// <param name="sen ...

  8. hive union all 使用

    功能:将两个表中的 同样的字段拼接到一起 測试: create external table IF NOT EXISTS temp_uniontest_ta ( a1 string, a2 strin ...

  9. 【高德地图API】一句话搞定webmap（一）——轻地图组件

    原文:[高德地图API]一句话搞定webmap(一)——轻地图组件 摘要: 遥想当年,在APP中加入LBS元素相当困难:要刻苦学习java,要刻苦学习iOS开发,要刻苦学习javascript…… 而 ...

  10. SharePoint 2013 搜索SharePoint 特定列和特定文档（自己定义搜索）

    SharePoint 2013 搜索SharePoint 特定列和特定文档 1,操作步骤和图例,因语言和版本号的不同 我尽量使用抓图方式. 2.  In Central Administration, ...