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 相关文章推荐
IE图片缓存document.execCommand(&quot;BackgroundImageCache&quot;,false,true)
Mar 01 Javascript
jQuery源码分析-05异步队列 Deferred 使用介绍
Nov 14 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
javascript禁用Tab键脚本实例
Nov 22 Javascript
js 实现的可折叠留言板(附源码下载)
Jul 01 Javascript
与Math.pow 相反的函数使用介绍
Aug 04 Javascript
JsRender for index循环索引用法详解
Oct 31 Javascript
jQuery使用ajax跨域获取数据的简单实例
May 18 Javascript
JavaScript实现的搜索及高亮显示功能示例
Aug 14 Javascript
js代码规范之Eslint安装与配置详解
Sep 08 Javascript
React降级配置及Ant Design配置详解
Dec 27 Javascript
vue插件mescroll.js实现移动端上拉加载和下拉刷新
Mar 07 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
dede3.1分页文字采集过滤规则详说(图文教程)
2007/04/03 PHP
php实现在线生成条形码示例分享(条形码生成器)
2013/12/30 PHP
PHP  实现等比压缩图片尺寸和大小实例代码
2016/10/08 PHP
PHP使用PhpSpreadsheet操作Excel实例详解
2020/03/26 PHP
解决PhpStorm64不能启动的问题
2020/06/20 PHP
[原创]js获取数组任意个不重复的随机数组元素
2010/03/15 Javascript
jquery easyui滚动条部分设置介绍
2013/09/12 Javascript
Event altKey,ctrlKey,shiftKey属性解析
2013/12/18 Javascript
jquery地址栏链接与a标签链接匹配之特效代码总结
2015/08/24 Javascript
jQuery实现分章节锚点“回到顶部”动画特效代码
2015/10/23 Javascript
JavaScript的Number对象的toString()方法
2015/12/18 Javascript
老生常谈JavaScript数组的用法
2016/06/10 Javascript
原生JS实现图片网格式渐显、渐隐效果
2017/06/05 Javascript
ES6模块化的import和export用法方法总结
2017/08/08 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
2017/09/30 Javascript
vue将对象新增的属性添加到检测序列的方法
2018/02/24 Javascript
js中apply和Math.max()函数的问题及区别介绍
2018/03/27 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
[48:44]2014 DOTA2国际邀请赛中国区预选赛5.21 TongFu VS HGT
2014/05/22 DOTA
[01:39:04]DOTA2-DPC中国联赛 正赛 SAG vs CDEC BO3 第二场 2月1日
2021/03/11 DOTA
Mac中升级Python2.7到Python3.5步骤详解
2017/04/27 Python
Python 2/3下处理cjk编码的zip文件的方法
2019/04/26 Python
Python基础学习之时间转换函数用法详解
2019/06/18 Python
Django 路由控制的实现
2019/07/17 Python
提升Python效率之使用循环机制代替递归函数
2019/07/23 Python
使用K.function()调试keras操作
2020/06/17 Python
3分钟演讲稿
2014/04/30 职场文书
大学生党员承诺书
2014/05/20 职场文书
学习考察心得体会
2014/09/04 职场文书
个性与发展自我评价
2015/03/06 职场文书
紧急通知
2015/04/17 职场文书
2015暑期社会实践调查报告
2015/07/14 职场文书
有趣的二维码:使用MyQR和qrcode来制作二维码
2021/05/10 Python
Python中使用ipython的详细教程
2021/06/22 Python
MySQL sql模式设置引起的问题
2022/05/15 MySQL