JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

來源：懂視網(wǎng) 責(zé)編：小采時(shí)間：2020-11-27 22:20:44

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例:本文實(shí)例講述了JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果。分享給大家供大家參考，具體如下：先來看看運(yùn)行效果：具體代碼如下： <!doctype html > <html> <head> <meta charset=utf-8/> <title>拋物線運(yùn)動(dòng)&

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

導(dǎo)讀JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例:本文實(shí)例講述了JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果。分享給大家供大家參考，具體如下：先來看看運(yùn)行效果：具體代碼如下： <!doctype html > <html> <head> <meta charset=utf-8/> <title>拋物線運(yùn)動(dòng)&

本文實(shí)例講述了JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果。分享給大家供大家參考，具體如下：

先來看看運(yùn)行效果：

具體代碼如下：

<!doctype html >
<html>
<head>
 <meta charset="utf-8"/>
 <title>拋物線運(yùn)動(dòng)</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); //參數(shù)2：拋物線角度，參數(shù)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.gxlcms.com
<input type="button" value="拋物線" onclick="test()"/>
 <div class="pwx_rect" id="rect"></div>
 <div class="pwx_hr"></div>
</body>
</html>

實(shí)現(xiàn)思路：

X方向的邊長每次遞增5，角度每次遞減1，根據(jù)這兩個(gè)已知條件，通過三角函數(shù)就可以計(jì)算出Y方向的長度是多少

從而得出每次運(yùn)動(dòng)的X和Y方向的坐標(biāo)值，達(dá)到拋物線的效果

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript查找算法技巧總結(jié)》、《JavaScript動(dòng)畫特效與技巧匯總》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對大家JavaScript程序設(shè)計(jì)有所幫助。

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

推薦度：

點(diǎn)擊下載本文 文檔為doc格式

標(biāo)簽：運(yùn)動(dòng) 實(shí)現(xiàn) js

熱門焦點(diǎn)

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

JS實(shí)現(xiàn)的拋物線運(yùn)動(dòng)效果示例

最新推薦

猜你喜歡

熱門推薦