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 相关文章推荐
PJ Blog修改-禁止复制的代码和方法
Oct 25 Javascript
jQuery 图像裁剪插件Jcrop的简单使用
May 22 Javascript
判断用户是否在线的代码
Mar 05 Javascript
jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享
Apr 22 Javascript
JavaScript图片轮播代码分享
Jul 31 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
基于JavaScript实现点击页面任何位置返回
Aug 31 Javascript
Bootstrap进度条与AJAX后端数据传递结合使用实例详解
Apr 23 Javascript
解决layui上传文件提示上传异常,实际文件已经上传成功的问题
Aug 19 Javascript
jQuery访问json文件中数据的方法示例
Jan 28 jQuery
javascript实现滚轮轮播图片
Dec 13 Javascript
JS不要再到处使用绝对等于运算符了
Apr 30 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
十大催泪虐心动漫,你能坚持看到第几部?
2020/03/04 日漫
分页详解 从此分页无忧(PHP+mysql)
2007/11/23 PHP
php初学者写及时补给skype用户充话费的小程序
2008/11/02 PHP
centos 5.6 升级php到5.3的方法
2011/05/14 PHP
PHP中error_reporting()函数的用法(修改PHP屏蔽错误)
2011/07/01 PHP
限制ckeditor上传图片文件大小的方法
2013/11/15 PHP
PHP文件读取功能的应用实例
2015/05/08 PHP
PHP7安装Redis扩展教程【Linux与Windows平台】
2016/09/30 PHP
Yii2下点击验证码的切换实例代码
2017/03/14 PHP
实例讲解php实现多线程
2019/01/27 PHP
js实现点击后将文字或图片复制到剪贴板的方法
2014/08/04 Javascript
jQuery中empty()方法用法实例
2015/01/16 Javascript
jquery中radio checked问题
2015/03/16 Javascript
javascript对象的相关操作小结
2016/05/16 Javascript
js enter键激发事件实例代码
2016/08/17 Javascript
js 判断数据类型的几种方法
2017/01/13 Javascript
JS简单实现父子窗口传值功能示例【未使用iframe框架】
2017/09/20 Javascript
Node.js学习之查询字符串解析querystring详解
2017/09/28 Javascript
vue数据控制视图源码解析
2018/03/28 Javascript
python批量修改文件名的实现代码
2014/09/01 Python
Python初学时购物车程序练习实例(推荐)
2017/08/08 Python
Python求解任意闭区间的所有素数
2018/06/10 Python
详解python中的装饰器
2018/07/10 Python
Python 多线程不加锁分块读取文件的方法
2018/12/11 Python
Python字节单位转换实例
2019/12/05 Python
如何利用python进行时间序列分析
2020/08/04 Python
Nanushka官网:匈牙利服装品牌
2019/08/14 全球购物
Hotels.com日本:国外和海外住宿,酒店预订
2019/12/13 全球购物
初中政治教学反思
2014/01/17 职场文书
个人简历中的自我评价怎么写
2014/01/26 职场文书
道路运输企业安全生产责任书
2014/07/28 职场文书
查摆问题整改措施
2014/10/24 职场文书
负责培养人意见
2015/06/05 职场文书
中学后勤工作总结2015
2015/07/22 职场文书
python中取整数的几种方法
2021/11/07 Python
JS实现页面炫酷的时钟特效示例
2022/08/14 Javascript