本文实例讲述了JS实现的小火箭发射动画效果。分享给大家供大家参考，具体如下：

<!DOCTYPE html>
<html lang=\"en\">
<head>
  <  charset=\"UTF-8\">
  < >小火箭发射</ >
  <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>
  <  type=\"text/ \">
    // 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的时间函数
    }
  </ >
</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\"  =\" :stop();\"  =\" :start_send();\">
        <span>悬停按钮</span>
      </div>
      <div class=\"bt_stop\"  =\" :fly();\">
        <span>发射按钮</span>
      </div>
    </div>
</body>
</html>

感兴趣的朋友可以使用在线HTML/CSS/ 代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

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

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

继续阅读与本文标签相同的文章

无标签
最新文章 最热文章
收藏 打印

特别推荐 2026年05月19日 星期二

精彩发现

热门标签

阻止表单提交 窗口 关闭浏览器 清除 CDATA css文件 光标位置 坐标 javascrpt !important 超链接 数字

相关文章