JS实现的抛物线运动效果示例


Posted in Javascript onJanuary 30, 2018

本文实例讲述了JS实现的抛物线运动效果。分享给大家供大家参考,具体如下:

先来看看运行效果:

JS实现的抛物线运动效果示例

具体代码如下:

<!doctype html >
<html>
<head>
  <meta charset="utf-8"/>
  <title>抛物线运动</title>
  <style>
    .pwx_rect{position:absolute;left:10px;top:300px;background-color:#888;height:50px;width:50px;}
    .pwx_hr{border-top:2px solid #ddd;position:absolute;width:98%;left:0px;top:350px;}
  </style>
  <script>
    test = function(){
      var rect = document.getElementById("rect");
      pwx(rect,60,5); //参数2:抛物线角度,参数3:横向速度每次增加5
    }
    function pwx(rect,radian,step){
      var animate = function(opt){
        var cos = Math.cos(opt.radian*Math.PI/180);//邻边比斜边,60度的话等于1/2
        var sin = Math.sin(opt.radian*Math.PI/180);//对边比斜边,30度的话等于1/2
        var left = opt.rect.offsetLeft;
        var top = opt.rect.offsetTop;
        if(opt.radian>0){
          left+=opt.step;
          opt.radian-=1; //角度递减1
          var a = left - opt.initLeft;
          var c = (a/cos);
          var b = (sin*c);
          opt.rect.style.left = opt.initLeft+a+"px";
          opt.rect.style.top = opt.initTop-b+"px";
          setTimeout(function(){
            animate(opt);
          },10);
        }else{
          opt.rect.style.left = left+opt.step+"px";
          opt.rect.style.top = opt.initTop+"px";
        }
      }
      animate({
        step : step,
        rect : rect,
        radian : radian,
        initTop : rect.offsetTop,
        initLeft : rect.offsetLeft
      });
    }
  </script>
</head>
<body>
3water.com
<input type="button" value="抛物线" onclick="test()"/>
  <div class="pwx_rect" id="rect"></div>
  <div class="pwx_hr"></div>
</body>
</html>

实现思路:

JS实现的抛物线运动效果示例

X方向的边长每次递增5,角度每次递减1,根据这两个已知条件,通过三角函数就可以计算出Y方向的长度是多少

从而得出每次运动的X和Y方向的坐标值,达到抛物线的效果

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

Javascript 相关文章推荐
javascript web对话框与弹出窗口
Feb 22 Javascript
两个listbox实现选项的添加删除和搜索
Mar 01 Javascript
jquery访问ashx文件示例代码
Aug 11 Javascript
JS表格组件神器bootstrap table详解(基础版)
Dec 08 Javascript
在AngularJS中使用jQuery的zTree插件的方法
Apr 21 Javascript
AngularJs自定义服务之实现签名和加密
Aug 02 Javascript
JS中的hasOwnProperty()、propertyIsEnumerable()和isPrototypeOf()
Aug 11 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 Javascript
Easy UI动态树点击文字实现展开关闭功能
Sep 30 Javascript
Vue通过URL传参如何控制全局console.log的开关详解
Dec 07 Javascript
layer.close()关闭进度条和Iframe窗的方法
Aug 17 Javascript
Javascript地址引用代码实例解析
Feb 25 Javascript
express如何使用session与cookie的方法
Jan 30 #Javascript
JavaScript实现的贝塞尔曲线算法简单示例
Jan 30 #Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
Jan 30 #Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
Jan 30 #Javascript
微信小程序数据存储与取值详解
Jan 30 #Javascript
Vue精简版风格概述
Jan 30 #Javascript
vue自定义全局组件(自定义插件)的用法
Jan 30 #Javascript
You might like
一个目录遍历函数
2006/10/09 PHP
PHP生成月历代码
2007/06/14 PHP
PHP fgetcsv 定义和用法(附windows与linux下兼容问题)
2012/05/29 PHP
PHP中计算字符串相似度的函数代码
2012/12/29 PHP
php二维数组合并及去重复的方法
2015/03/04 PHP
PHP经典算法集锦【经典收藏】
2016/09/14 PHP
PHP 结合 Boostrap 结合 js 实现学生列表删除编辑及搜索功能
2019/05/21 PHP
收藏一些不常用,但是有用的代码
2007/03/12 Javascript
仿迅雷焦点广告效果(JQuery版)
2008/11/19 Javascript
javascript一元操作符(递增、递减)使用示例
2013/08/07 Javascript
Javascript排序算法之合并排序(归并排序)的2个例子
2014/04/04 Javascript
JavaScript实现拖拽网页内元素的方法
2015/04/15 Javascript
基于Node.js实现nodemailer邮件发送
2016/01/26 Javascript
javascript HTML5文件上传FileReader API
2020/03/27 Javascript
Vue.use源码分析
2017/04/22 Javascript
jquery实现简单实用的轮播器
2017/05/23 jQuery
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
2017/12/12 Javascript
Vue.js实现的计算器功能完整示例
2018/07/11 Javascript
Vue最新防抖方案(必看篇)
2019/10/30 Javascript
vue 接口请求地址前缀本地开发和线上开发设置方式
2020/08/13 Javascript
[02:36]DOTA2上海特锦赛 回忆电竞生涯的重要瞬间
2016/03/25 DOTA
Python反射用法实例简析
2017/12/22 Python
python逆序打印各位数字的方法
2018/06/25 Python
python下载微信公众号相关文章
2019/02/26 Python
应用OpenCV和Python进行SIFT算法的实现详解
2019/08/21 Python
python中添加模块导入路径的方法
2021/02/03 Python
HTML5+CSS3实现无插件拖拽上传图片(支持预览与批量)
2017/01/05 HTML / CSS
美国网上眼镜商城:Zenni Optical
2016/11/20 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
婚礼证婚人证婚词
2014/01/08 职场文书
幼儿园亲子活动总结
2014/04/26 职场文书
抗洪救灾先进集体事迹材料
2014/05/26 职场文书
水污染治理工程专业求职信
2014/06/14 职场文书
篮球兴趣小组活动总结
2014/07/07 职场文书
新闻稿格式范文
2015/07/18 职场文书
Python如何使用循环结构和分支结构
2022/04/13 Python