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 相关文章推荐
js动态添加onload、onresize、onscroll事件(另类方法)
Dec 26 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
vue.js 使用v-if v-else发现没有执行解决办法
May 15 Javascript
React-router中结合webpack实现按需加载实例
May 25 Javascript
Vue.js常用指令的使用小结
Jun 23 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
Jul 18 jQuery
vue.js与element-ui实现菜单树形结构的解决方法
Apr 21 Javascript
Vue props 单向数据流的实现
Nov 06 Javascript
vue 移动端注入骨架屏的配置方法
Jun 25 Javascript
浅谈layer弹出层按钮颜色修改方法
Sep 11 Javascript
vue 递归组件的简单使用示例
Jan 14 Vue.js
如何使JavaScript休眠或等待
Apr 27 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
PHP 远程关机实现代码
2009/11/10 PHP
php木马webshell扫描器代码
2012/01/25 PHP
php中大括号作用介绍
2012/03/22 PHP
php批量上传的实现代码
2013/06/09 PHP
CI框架开发新浪微博登录接口源码完整版
2014/05/28 PHP
php实现微信公众平台账号自定义菜单类
2014/12/02 PHP
PHP使用CURL实现多线程抓取网页
2015/04/30 PHP
PHP实现将多个文件压缩成zip格式并下载到本地的方法示例
2018/05/23 PHP
用JavaScript实现单继承和多继承的简单方法
2009/03/29 Javascript
jQuery选择器源码解读(六):Sizzle选择器匹配逻辑分析
2015/03/31 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
JavaScript编写连连看小游戏
2015/07/07 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
浏览器兼容性问题大汇总
2015/12/17 Javascript
Bootstrap3多级下拉菜单
2017/02/24 Javascript
基于Vue2.0的分页组件
2017/03/16 Javascript
JS设计模式之惰性模式(二)
2017/09/29 Javascript
vue移动端微信授权登录插件封装的实例
2018/08/28 Javascript
微信小程序上传图片并等比列压缩到指定大小的实例代码
2019/10/24 Javascript
jQuery AJAX应用实例总结
2020/05/19 jQuery
Paypal支付不完全指北
2020/06/04 Javascript
深入解析Python设计模式编程中建造者模式的使用
2016/03/02 Python
python 文件操作api(文件操作函数)
2016/08/28 Python
Python探索之自定义实现线程池
2017/10/27 Python
Python实现爬取百度贴吧帖子所有楼层图片的爬虫示例
2018/04/26 Python
Python的argparse库使用详解
2018/10/09 Python
详解Python传入参数的几种方法
2019/05/16 Python
美国领先的汽车轮胎和轮毂供应商:TireBuyer
2016/07/21 全球购物
松本清官方海外旗舰店:日本最大的药妆连锁店
2017/11/21 全球购物
美丽的珠宝配饰:SmallThings
2019/09/04 全球购物
总经理秘书岗位职责
2014/03/17 职场文书
2015年护士长个人工作总结
2015/04/24 职场文书
《西门豹》教学反思
2016/02/23 职场文书
小学四年级班务总结该怎么写?
2019/08/16 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
node.js使用express-fileupload中间件实现文件上传
2021/07/16 Javascript