JS实现的小火箭发射动画效果示例

2019-11-19 12:22:49

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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.VeVB.COm/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

希望本文所述对大家JavaScript程序设计有所帮助。

上一篇：原生JS实现的放大镜特效示例【测试可用】

下一篇：jQuery时间戳和日期相互转换操作示例