JS實現的小火箭發射動畫效果示例

來源：懂視網責編：小采時間：2020-11-27 22:02:44

JS實現的小火箭發射動畫效果示例

JS實現的小火箭發射動畫效果示例:本文實例講述了JS實現的小火箭發射動畫效果。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>小火箭發射</title> &l

推薦度：

點擊下載本文 文檔為doc格式

導讀JS實現的小火箭發射動畫效果示例:本文實例講述了JS實現的小火箭發射動畫效果。分享給大家供大家參考，具體如下： <!DOCTYPE html> <html lang=en> <head> <meta charset=UTF-8> <title>小火箭發射</title> &l

本文實例講述了JS實現的小火箭發射動畫效果。分享給大家供大家參考，具體如下：

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>小火箭發射</title>
 <style type="text/css">
 *{
 margin: 0px;
 padding: 0px;
 }
 .big{
 width: 500px;
 height: 600px;
 border: 1px solid #16283B;
 float: left;
 position: relative;
 background-color: #16283B;
 }
 .btm{
 height: 40px;
 width: 100px;
 background-color: royalblue;
 cursor: pointer;
 border: 1px solid blue;
 float: left;
 position: relative;
 top: 560px;
 left: 40px;
 }
 .btm span{
 line-height: 40px;
 width: 100px;
 display: block;
 text-align: center;
 }
 .bt_stop{
 height: 40px;
 width: 100px;
 background-color: royalblue;
 cursor: pointer;
 border: 1px solid blue;
 float: left;
 position: relative;
 top: 500px;
 left: -60px;
 }
 .bt_stop span{
 line-height: 40px;
 width: 100px;
 display: block;
 text-align: center;
 }
 .rocket{
 position: absolute;
 bottom: 18px;
 left: 180px;
 }
 </style>
 <script type="text/javascript">
 // alert("is work!");
 //任務1 火箭起飛
 //任務2 火箭懸停
 var start;
 function $(id) {
 return document.getElementById(id);
 }
 function fly() {
 start=self.setInterval("fly_do()",10);
 }
 function start_send() {
 alert('start');
 fly();
 }
 function stop() {
 //alert('stop');
 window.clearInterval(start);
 }
 function getBottom(rocket) {
 var bottomf = rocket.style.bottom;
 bottomf = parseInt(bottomf);
 if (!bottomf){
 bottomf=18;
 }
 bottomf++;
 return bottomf;
 }
 function fly_do() {
 //alert("this is fly");
 //通過不斷改變rocket里面的css屬性bottom
 //獲取rocket對象
 var rocket=$("yingshanhao");
 var bottomf=getBottom(rocket);
 //改變屬性
 rocket.style.bottom=bottomf+"px";
 //慢慢飛起來
 //js的時間函數
 }
 </script>
</head>
<body>
 <div class="big">
 <div class="rocket" id="yingshanhao">
 <img src="images/rocket1.jpg" style="width: 25%;height:25%;position: relative;left: 40px;bottom: -20px;" >
 </div>
 </div>
 <div class="btm" onmouseover="javascript:stop();" onmouseout="javascript:start_send();">
 <span>懸停按鈕</span>
 </div>
 <div class="bt_stop" onclick="javascript:fly();">
 <span>發射按鈕</span>
 </div>
 </div>
</body>
</html>

感興趣的朋友可以使用在線HTML/CSS/JavaScript代碼運行工具：http://tools.jb51.net/code/HtmlJsRun測試一下運行效果。

更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript運動效果與技巧匯總》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》

希望本文所述對大家JavaScript程序設計有所幫助。

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

JS實現的小火箭發射動畫效果示例

推薦度：

點擊下載本文 文檔為doc格式

標簽：小火箭動畫實現

熱門焦點

JS實現的小火箭發射動畫效果示例

JS實現的小火箭發射動畫效果示例

JS實現的小火箭發射動畫效果示例

最新推薦

猜你喜歡

熱門推薦