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 ...
随机推荐
- 关闭safari浏览器button默认样式
前两天又遇到一个头疼的问题,在Chrome上调试好的样式,去到手机上打开,傻了... 这是什么鬼... 搜了一下,才知道这是appearance属性搞的鬼.. . 比方你想让一个div拥有button ...
- 【从翻译mos文章】oracle linux 和外部存储系统 关系
oracle linux 和外部存储系统 关系 参考原始: Oracle Linux and External Storage Systems (Doc ID 753050.1) 范围: Linux ...
- Tomcat剖析(二):一个简单的Servlet服务器
Tomcat剖析(二):一个简单的Servlet服务器 1. Tomcat剖析(一):一个简单的Web服务器 2. Tomcat剖析(二):一个简单的Servlet服务器 3. Tomcat剖析(三) ...
- Android 4.4 沉浸式透明状态栏与导航栏
Android 系统自4.2 開始 UI 上就没多大改变,4.4 也仅仅是添加了透明状态栏与导航栏的功能,如图 那么如今我就来给大家解说下怎样使用这个新特性,让你的 app 尾随潮流,当然假设你不在乎 ...
- TypeScript入门
博客园首发,转载请注明出处,多谢支持.http://www.cnblogs.com/xuema/ 一.TypeScript TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaSc ...
- MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证
原文:MVC验证09-使用MVC的Ajax.BeginForm方法实现异步验证 MVC中,关于往后台提交的方法有: 1.Html.BeginForm():同步 2.Ajax.BeginForm():异 ...
- 根据Unix哲学来编写你的HTML5 Websocket服务器来实现全双工通信
websocketd代表WebSocket的守护进程 websocketd处理的是浏览器和服务器之间的WebSocket连接,它会启动你所指定的服务器端应用来对WebSockets进行处理,然后在浏览 ...
- Android在真机调试的设置方法
1. 设置android手机为USB调试模式.步骤: menu---> 设置 ---> 应用程序 ---> 开发 , 选择[USB调试] 2. 用USB连接手机和电脑,并确保成功.步 ...
- effective C++ 札记 规定17 在单独的陈述newed对象插入智能指针
// Test.cpp : 自定义控制台应用程序的入口点. // #include "stdafx.h" #include <iostream> #include &l ...
- 使用八种牛云存储解决方案ios7.1的app部署问题
使用八种牛云存储解决方案ios7.1的app部署问题 一个.问题叙述性说明 开发完ios版本号的app.须要将.ipa文件和.plist文件打包上传,供用户下载,在线安装.用户安装过程简单描写叙述例如 ...