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


Posted in Javascript onDecember 08, 2018

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

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

Javascript 相关文章推荐
js停止输出代码
Jul 20 Javascript
jquery实现微博文字输入框 输入时显示输入字数 效果实现
Jul 12 Javascript
点击弹出层效果&amp;弹出窗口后网页背景变暗效果的实现代码
Feb 10 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JS实现文件动态顺序载入的方法
Mar 07 Javascript
多种方式实现js图片预览
Dec 12 Javascript
js实现类bootstrap模态框动画
Feb 07 Javascript
JavaScript中数组常见操作技巧
Sep 01 Javascript
详解VueJS应用中管理用户权限
Feb 02 Javascript
使用webpack搭建vue项目实现脚手架功能
Mar 15 Javascript
javascript操作元素的常见方法小结
Nov 13 Javascript
React Ant Design树形表格的复杂增删改操作
Nov 02 Javascript
jQuery时间戳和日期相互转换操作示例
Dec 07 #jQuery
ES6的Fetch异步请求的实现方法
Dec 07 #Javascript
JavaScript this绑定过程深入详解
Dec 07 #Javascript
React 使用recharts实现散点地图的示例代码
Dec 07 #Javascript
如何手动实现es5中的bind方法详解
Dec 07 #Javascript
JavaScript时间与时间戳的转换操作实例分析
Dec 07 #Javascript
vue+SSM实现验证码功能
Dec 07 #Javascript
You might like
PHP5中的this,self和parent关键字详解教程
2007/03/19 PHP
Base64在线编码解码实现代码 演示与下载
2011/01/08 PHP
ThinkPHP3.1的Widget新用法
2014/06/19 PHP
thinkphp实现like模糊查询实例
2014/10/29 PHP
php中数组最简单的使用方法
2020/12/27 PHP
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
js跑马灯代码(自写)
2013/04/17 Javascript
使用jQuery避免鼠标双击的解决方案
2013/08/21 Javascript
node.js中的buffer.length方法使用说明
2014/12/14 Javascript
JavaScript使用setInterval()函数实现简单轮询操作的方法
2015/02/02 Javascript
js文本框走动跑马灯效果代码分享
2015/08/25 Javascript
深入理解Commonjs规范及Node模块实现
2017/05/17 Javascript
vue环境搭建简单教程
2017/11/07 Javascript
JavaScript中EventLoop介绍
2018/01/22 Javascript
JS中的算法与数据结构之栈(Stack)实例详解
2019/08/20 Javascript
layer.alert回调函数执行关闭弹窗的实例
2019/09/11 Javascript
JS回调函数深入理解
2019/10/16 Javascript
H5+css3+js搭建带验证码的登录页面
2020/10/11 Javascript
原生JS实现音乐播放器
2021/01/26 Javascript
[03:41]2018完美盛典-《Fight With Us》
2018/12/16 DOTA
python元组操作实例解析
2014/09/23 Python
Python的设计模式编程入门指南
2015/04/02 Python
使用基于Python的Tornado框架的HTTP客户端的教程
2015/04/24 Python
Python的GUI框架PySide的安装配置教程
2016/02/16 Python
python给微信好友定时推送消息的示例
2019/02/20 Python
twilio python自动拨打电话,播放自定义mp3音频的方法
2019/08/08 Python
Python DES加密实现原理及实例解析
2020/07/17 Python
Python通过字典映射函数实现switch
2020/11/06 Python
英国最大的宠物食品和宠物用品网上零售商: Zooplus
2016/08/01 全球购物
澳大利亚首屈一指的鞋类品牌:Tony Bianco
2018/03/13 全球购物
核心价值观演讲稿
2014/05/13 职场文书
机关保密工作承诺书
2015/05/04 职场文书
老公写给老婆的检讨书
2015/05/06 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle
基于Redis6.2.6版本部署Redis Cluster集群的问题
2022/04/01 Redis