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 相关文章推荐
分享20款好玩的jQuery游戏
Apr 17 Javascript
刷新页面的几种方法小结(JS,ASP.NET)
Jan 07 Javascript
JS获取浏览器语言动态加载JS文件示例代码
Oct 31 Javascript
使用jQuery实现验证上传图片的格式与大小
Dec 03 Javascript
jQuery插件EnPlaceholder实现输入框提示文字
Jun 05 Javascript
Jquery实现简单的轮播效果(代码管用)
Mar 14 Javascript
使用ES6语法重构React代码详解
May 09 Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 Javascript
react-router 路由切换动画的实现示例
Dec 03 Javascript
javascript实现一款好看的秒表计时器
Sep 05 Javascript
浅析我对JS延迟异步脚本的思考
Oct 12 Javascript
7个你应该知道的JS原生错误类型
Apr 29 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
第四节 构造函数和析构函数 [4]
2006/10/09 PHP
自动跳转中英文页面
2006/10/09 PHP
php发送html格式文本邮件的方法
2015/06/10 PHP
php+redis实现多台服务器内网存储session并读取示例
2017/01/12 PHP
PHP7引入的&quot;??&quot;和&quot;?:&quot;的区别讲解
2019/04/08 PHP
laravel 验证错误信息到 blade模板的方法
2019/09/29 PHP
菜鸟javascript基础整理1
2010/12/06 Javascript
用Javascript实现Windows任务管理器的代码
2012/03/27 Javascript
js清除input中type等于file的值域(示例代码)
2013/12/24 Javascript
jQuery实现带延迟的二级tab切换下拉列表效果
2015/09/01 Javascript
JS设置CSS样式的方式汇总
2017/01/21 Javascript
Easyui在treegrid添加控件的实现方法
2017/06/23 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
从parcel.js打包出错到选择nvm的全部过程
2018/01/23 Javascript
详解vue.js根据不同环境(正式、测试)打包到不同目录
2018/07/13 Javascript
在移动端使用vue-router和keep-alive的方法示例
2018/12/02 Javascript
node.js中ws模块创建服务端和客户端,网页WebSocket客户端
2019/03/06 Javascript
解决layui table表单提示数据接口请求异常的问题
2019/09/24 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
详解设计模式中的工厂方法模式在Python程序中的运用
2016/03/02 Python
Django小白教程之Django用户注册与登录
2016/04/22 Python
Python cookbook(数据结构与算法)将多个映射合并为单个映射的方法
2018/04/19 Python
python3获取当前文件的上一级目录实例
2018/04/26 Python
详解Python学习之安装pandas
2019/04/16 Python
Python SQLAlchemy入门教程(基本用法)
2019/11/11 Python
狗狗玩具、零食和咀嚼物的月度送货服务:Super Chewer
2018/08/22 全球购物
艺术用品:Arteza
2018/11/25 全球购物
巴黎欧莱雅法国官网:L’Oreal Paris
2019/04/30 全球购物
英国网上电器商店:Electricshop
2020/03/15 全球购物
授权委托书
2014/07/31 职场文书
领导干部作风建设工作总结
2014/10/23 职场文书
运动会通讯稿200字
2015/07/20 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
Nginx解决403 forbidden的完整步骤
2021/04/01 Servers
大型强子对撞机再次重启探索“第五种自然力”
2022/04/29 数码科技
vue使用watch监听属性变化
2022/04/30 Vue.js