jQuery模拟物体自由落体运动(附演示与demo源码下载)


Posted in Javascript onJanuary 21, 2016

本文实例讲述了jQuery模拟物体自由落体运动的方法。分享给大家供大家参考,具体如下:

运行效果截图如下:

jQuery模拟物体自由落体运动(附演示与demo源码下载)

点击此处查看在线演示效果。

完整实例代码点击此处本站下载。

具体代码如下:

<!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>
 <title>自由落体</title>
 <script src="jquery-1.7.1.min.js" type="text/javascript"></script>
 <script type="text/javascript" >
  $(document).ready(function () {
  });
  var all_Height = 500;
  var a = 9.8; // 加速度
  var v = 0;
  var prev_Time = 0;
  var prev_Speed = 0;
  var prev_Height = 0;
  var speed = 0;
  // 获取当前的高度
  var getHeight = function (obj) {
   return obj.offset().top;
  }
  // 获取当前的速度
  var getSpeed = function (time, a) {
   return time * a;
  }
  // 向下走时获得当前物体所走的路径
  var getCurrentHeight = function (time) {
   return 1 / 2 * a * time * time;
  }
  // 向上走时获得当前物体所走的路径
  var getCurrentHeight2 = function (speed, time) {
   return speed * time - 1 / 2 * a * time * time;
  }
  // 向下跑
  function down() {
   prev_Time = 0;
   var interval = setInterval(function () {
    if (getHeight($(".obj")) < all_Height) {
     prev_Time = prev_Time + 0.1;
     var height = getCurrentHeight(prev_Time) + prev_Height;
     $(".obj").css("top", height + "px");
     $(".info").append("<div>" + height + "</div>");
    } else {
     speed = getSpeed(a, prev_Time);
     prev_Speed = speed;
     clearInterval(interval);
     up();
    }
   }, 5);
  }
  // 向上跑
  function up() {
   prev_Time = 0;
   prev_Speed -= 4; // 动能损耗
   var interval = setInterval(function () {
    if (speed > 0) {
     speed = prev_Speed - getSpeed(a, prev_Time);
     prev_Time = prev_Time + 0.1;
     var height = all_Height - getCurrentHeight2(prev_Speed, prev_Time);
     $(".obj").css("top", height + "px");
    } else {
     clearInterval(interval);
     prev_Height = $(".obj").offset().top;
     if (prev_Height < all_Height) {
      down();
     }
    }
   }, 5);
  }
  function play() {
   alert('play');
   down();
   document.getElementById("obj").onclick = null;
  }
 </script>
 <style type="text/css">
 body{ margin:0 0 0 0 ; background:#FFFFFF;}
 .title { text-align:center; color:#666666; border-bottom:2px solid gray; font-size:30px; line-height:100px; font-weight:bolder;}
 .obj { background-image:url('a.jpg'); width:50px; height:50px; position:absolute; top:0; left:0; }
 </style>
</head>
<body>
<div style="height:550px; border-bottom:2px solid gray;">
<div class="title" >自由落体大模拟<span style="font-size:12px;">(点击图片让它落下)</span></div>
</div>
<div class="obj" id="obj" onclick="play();" ></div>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript里的条件判断
Feb 27 Javascript
THREE.JS入门教程(5)你应当知道的十件事
Jan 24 Javascript
jquery 实现input输入什么div图层显示什么
Jun 15 Javascript
jquery使用remove()方法删除指定class子元素
Mar 26 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
九种原生js动画效果
Nov 11 Javascript
jQuery+JSON实现AJAX二级联动实例分析
Dec 18 Javascript
JavaScript判断对象是否为数组
Dec 22 Javascript
给angular加上动画效遇到的问题总结
Feb 17 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
JS实现的自定义map方法示例
May 17 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
angularjs表格分页功能详解
Jan 21 #Javascript
使用angularjs创建简单表格
Jan 21 #Javascript
Jquery中巧用Ajax的beforeSend方法
Jan 20 #Javascript
Javascript中神奇的this
Jan 20 #Javascript
javascript实现图片轮播效果
Jan 20 #Javascript
JS获取鼠标坐标位置实例分析
Jan 20 #Javascript
属于你的jQuery提示框(Tip)插件
Jan 20 #Javascript
You might like
通过文字传递创建的图形按钮
2006/10/09 PHP
MayFish PHP的MVC架构的开发框架
2009/08/13 PHP
php学习之数据类型之间的转换介绍
2011/06/09 PHP
thinkPHP查询方式小结
2016/01/09 PHP
Symfony控制层深入详解
2016/03/17 PHP
PHP实现基于图的深度优先遍历输出1,2,3...n的全排列功能
2017/11/10 PHP
jquery 必填项判断表单是否为空的方法
2008/09/14 Javascript
asp 取文本框名称代码
2008/12/02 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
jQuery建立一个按字母顺序排列的友好页面索引(兼容IE6/7/8)
2013/02/26 Javascript
jQuery 2.0.3 源码分析之core(一)整体架构
2014/05/27 Javascript
浅谈javascript 函数内部属性
2015/01/21 Javascript
javascript数据结构之双链表插入排序实例详解
2015/11/25 Javascript
JavaScript学习笔记之函数记忆
2017/09/06 Javascript
Javascript防止图片拉伸的自适应处理方法
2017/12/26 Javascript
原生JavaScript实现todolist功能
2018/03/02 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
Angular4.0动画操作实例详解
2019/05/10 Javascript
JavaScript中var的重要性实例分析
2019/07/09 Javascript
详解Python的Django框架中inclusion_tag的使用
2015/07/21 Python
Python实现字符串格式化输出的方法详解
2017/09/20 Python
对python中字典keys,values,items的使用详解
2019/02/03 Python
Python之时间和日期使用小结
2019/02/14 Python
Python可迭代对象操作示例
2019/05/07 Python
关于pymysql模块的使用以及代码详解
2019/09/01 Python
Python搭建HTTP服务过程图解
2019/12/14 Python
python利用百度云接口实现车牌识别的示例
2020/02/21 Python
keras.layer.input()用法说明
2020/06/16 Python
CSS3,线性渐变(linear-gradient)的使用总结
2017/01/09 HTML / CSS
优秀毕业生就业推荐信
2014/05/22 职场文书
委托书如何写
2014/08/30 职场文书
大学运动会通讯稿
2015/07/18 职场文书
mysql 8.0.24 安装配置方法图文教程
2021/05/12 MySQL
python和C/C++混合编程之使用ctypes调用 C/C++的dll
2022/04/29 Python
Android开发手册Chip监听及ChipGroup监听
2022/06/10 Java/Android
redis protocol通信协议及使用详解
2022/07/15 Redis