JS抛物线

最新推荐文章于 2023-09-03 22:35:29 发布
最新推荐文章于 2023-09-03 22:35:29 发布
阅读量604 收藏 1
点赞数 1
分类专栏： javascript

这次给大家带来JS做出抛物线运动轨迹，JS做出抛物线运动轨迹的注意事项有哪些，下面就是实战案例，一起来看一下。

具体代码如下：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

<!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>

www.jb51.net

<input type="button" value="抛物线" onclick="test()"/>

  <p class="pwx_rect" id="rect"></p>

  <p class="pwx_hr"></p>

</body>

</html>

ZH-墨
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript实现绘制抛物线（附完整源码）
希望我的博客，能帮上你解决学习中工作中所遇到的问题
11-07 88
JavaScript实现绘制抛物线（附完整源码）
抛物线js源码
02-03
在妙味课堂看到的抛物线运动的js源码，有需要的同学可以下载使用
javascript实现- 抛物线
weixin_45451197的博客
03-23 264
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> #ball{ position: absolute; top: 500px; left...
基于JavaScript抛物线动画实现
最新发布
weixin_45785873的博客
09-03 374
基于JavaScript抛物线动画实现，实现了一个基于贝塞尔曲线的抛物线动画，这里使用到了三种表现形式：css的transition、css3的animation动画和JavaScript的requestAnimationFrame。
js之线性运动&抛物线运动&缓冲运动
weixin_42820765的博客
05-24 264
js之线性运动&抛物线运动&缓冲运动
js实现的抛物线运动
11-11
一个js的抛物线运动的特效,非常简单. <p>点击屏幕任意区域开始运动，拖动椭圆目标至任意位置也能运动</p> <div id="target" class="target"></div> <div id="element" class="element"></div> <i class="x" title="x轴"></i> <i class="y" title="y轴"></i> <a href="http://www.zhangxinxu.com/wordpress/?p=3855" class="article">本demo相关文章»</a> <script src="/study/201309/requestAnimationFrame.js"></script>
js实现抛物线
qq_52886072的博客
09-04 777
<!DOCTYPEhtml> <htmllang="en"> <head> <metacharset="UTF-8"> <metahttp-equiv="X-UA-Compatible"content="IE=edge"> <metaname="viewport"content="width=device-width,initial-scale=1.0"> <titl...
js绘制抛物线
小小少年
03-07 1984
效果图： 实例主要依赖张鑫旭大神的抛物线js,我稍作了一些改造，具体代码如下。 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;抛物线运动效果&lt;/title&gt; &lt;style type="t
js 抛物线
她的猿的博客
03-21 251
<!DOCTYPE html> <html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> * { margin: 0; padding: 0; } .box {
JS 实现抛物线运动
lyqhn2012的专栏
07-04 3810
JS实现简单的抛物线动画，需要的童鞋可以参考下 <div class="content"> <div class="slider"> <div class="icon"> <span class="fa fa-circle" id="cart" ></span> </div> </div> </div><scrip
JS实现的抛物线运动效果示例
11-28
本文实例讲述了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:absolut
JS小球抛物线轨迹运动的两种实现方法详解
11-29
本文实例讲述了JS小球抛物线轨迹运动的两种实现方法。分享给大家供大家参考，具体如下： js实现小球抛物轨迹运动的大致思路： 1、用setInterval()方法，进行间隔性刷新，更新小球位置，以实现动态效果 2、绘制小球和运动区域，运动区域可通过flex布局实现垂直居中 3、用物理公式S(y)=1/2*g*t*t，S(x)=V(x)t来计算路径 现确定V(x)=4m/s,刷新的时间间隔设置为0.1s。原本px和米之间的转换，不同尺寸转换不同，本例采用17寸显示器，大约1px=0.4mm。但浏览器太小，因此只能模拟抛物线轨迹，本例将px和米之间缩成100倍。 第一种：通过border-radiu
JS抛物线动画实例制作
10-18
本篇文章给大家详细分析了JS抛物线动画制作过程以及相关的代码实例分享，有兴趣的朋友参考下。
js实现一条抛物线
weixin_30485799的博客
02-23 241
抛物线运动解释： 以右开口为例，根据公式 y^2 = 2px 。确定p的值，已知x求y。 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <title></title> 6 </head...
JS实现抛物线运动
zhuolei123的专栏
02-16 3380
抛物线运动 .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;} test
js实现小球抛物线运动
weixin_43019353的博客
08-12 467
首先从公式和我们页面的dom可知，坐标点(x,y)是已知的，参数a、b、c是未知 因为坐标系是由我们设定，所以我们可以假设我们的初始点为(0,0)这样也是方便我们后面的计算 代入公式可知，c = 0 则剩下的问题就是求a、b了 假设a=0.001实际指焦点到准线的距离，可以抽象成曲率，这里模拟扔物体的抛物线，因此是开口向下的 则 b = (y - 0.001 * x * x) / x <!DOCTYPE html> <html lang="en"> <head>
JS实现抛物线效果
梦想就在前方
12-04 689
发现一个前端大牛作的抛物线效果，抛物线的函数不论，用requestAnimationFrame来做动画平滑过渡还是蛮帅的。 实现要点： 1. 利用requestAnimationFrame递归调用step方法实现平移. 2. 函数抛物线算法 Demo: [code="java"] .pos1{ position: absol...
原生js抛物线运动函数封装
kl2115911的博客
05-12 265
效果图 在封装时遇到的问题：每次点击开始运动按钮时位置会从前一次运动完的位置开始计算，经调试问题已解决。 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } .box{ width
cesium.js绘制抛物线
04-05
以下是使用cesium.js绘制抛物线的示例代码： ``` var viewer = new Cesium.Viewer('cesiumContainer'); var position = Cesium.Cartesian3.fromDegrees(-75.59777, 40.03883, 1000.0); var velocity = Cesium....

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值