php抛物线函数,通过JS如何实现抛物线运动（详细教程）

这篇文章主要介绍了JS实现的抛物线运动效果,结合实例形式分析了javascript抛物线运动的相关运算与元素动态操作实现技巧,需要的朋友可以参考下

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

先来看看运行效果：

具体代码如下：

抛物线运动

.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 = 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

});

}

www.jb51.net

实现思路：

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

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

上面是我整理给大家的，希望今后会对大家有帮助。

相关文章：