jquery 实现飘落效果
<!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 实现飘落效果的更多相关文章
- 简单说 JavaScript实现雪花飘落效果
说明 这次实现的雪花飘落的效果很简单,主要是为了练习练习JavaScript中的定时器,setTimeout 和 setInterval. 效果图 解释setTimeout() setTimeout函 ...
- jQuery实现放大镜效果
1.1.1 摘要 相信大家都见过或使用过放大镜效果,甚至实现过该效果,它一般应用于放大查看商品图片,一些电商网站(例如:凡客,京东商城,阿里巴巴等)都有类似的图片查看效果. 在接下来的博文中,我们将向 ...
- jquery左右滑动效果的实现
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 仿jQuery的siblings效果的js原生代码
仿jQuery的siblings效果的js原生代码 <previousSibling> 属性返回选定节点的上一个同级节点(在相同树层级中的前一个节点). <nextSibling&g ...
- JQuery实现广告效果(滚动切换)
JQuery实现广告效果(滚动切换) Html+css 效果如上图 代码: <!DOCTYPE html> <html> <head lang="en&qu ...
- js实现雪花飘落效果的代码
使用js实现雪花飘落的效果,用html5绘布加js写的雪花飘效果 . 代码: <html> <head> <script> /** * js与html5实现的雪花飘 ...
- 16个最棒的jQuery视差滚动效果教程
今天我们整理了16个最棒的jQuery视差滚动效果教程 , 并附有演示地址,你可以快速的查看教程的效果,或者应用在自己的项目中.希望本文对想要学习或者使用jQuery视差效果的朋友有帮助,慢慢的欣赏吧 ...
- jQuery之动画效果show()......animate()
jQuery之动画效果 1.show()显示效果 语法:show(speed,callback) Number/String,Function speend为动画执行时间,单位为毫秒.也可以为slow ...
- jquery特效 幻灯片效果
jquery特效 幻灯片效果,效果图如下: <!DOCTYPE html> <html> <head> <meta http-equiv="Cont ...
随机推荐
- Python学习笔记21:数据库操作(sqlite3)
Python自带一个轻量级的关系型数据库SQLite.这一数据库使用SQL语言. SQLite作为后端数据库,能够搭配Python建站点,或者制作有数据存储需求的工具. SQLite还在其他领域有广泛 ...
- nginx基础入门
nginx常常被用来处理静态资源如css.js.图片.html等,也被用作反向代理server.邮件server,也时常拿来做负载均衡.它的优势主要体如今对静态资源的处理上,这次抽出了点时间整理了一些 ...
- Tomcat剖析(二):一个简单的Servlet服务器
Tomcat剖析(二):一个简单的Servlet服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三) ...
- 创建位图画刷(CreatePatternBrush)
3.创建位图画刷(CreatePatternBrush) CBitMap bmp; bmp.LoadBitMap(IDB_MYBITMAP) ; CBrush bs ; bs.CreatePatter ...
- 它们的定义app.config中间section节点和在执行中使用
如果现在我们需要在app.config一个节点的在下面的例子中,定义,我们需要如何进行操作? <configSections> <section name="integra ...
- (c#2.0)serialPort串口通讯
原文:(c#2.0)serialPort串口通讯 using System; using System.Collections.Generic; using System.ComponentModel ...
- MVC验证04-自定义验证规则、日期范围验证
原文:MVC验证04-自定义验证规则.日期范围验证 本文体验范围验证.与本文相关的包括: MVC验证01-基础.远程验证 MVC验证02-自定义验证规则.邮件验证 MVC验证03-自定义验证规 ...
- java设计模式之一工厂模式
简单工厂模式是java设计模式中最简单的设计模式之一: 工厂模式是最常用的设计模式之一. 工厂模式就相当于创建实例对象的new,我们经常要根据类Class生成实例对象,如A a=new A() 工厂模 ...
- (C语言)共用体union的使用方法举例
曾经在学校学习C语言的时候一直搞不懂那个共用体union有什么用的.工作之后才发现它的一些妙用,现举比例如以下: 1. 为了方便看懂代码. 比方说想写一个3 * 3的矩阵,能够这样写: [ 注:以下用 ...
- DEDECMS织梦常用二开自定义标签
网站名称:{dede:global.cfg_webname/} 网站根网址:{dede:global.cfg_basehost/} 网站根目录:{dede:global.cfg_cmsurl/} 网页 ...