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取滚动条的尺寸的函数代码
Nov 30 Javascript
JavaScript返回0-1之间随机数的方法
Apr 06 Javascript
jQuery插件制作之全局函数用法实例
Jun 01 Javascript
详解vue之页面缓存问题(基于2.0)
Jan 10 Javascript
js仿iphone秒表功能 计算平均数
Jan 11 Javascript
vue2实现移动端上传、预览、压缩图片解决拍照旋转问题
Apr 13 Javascript
js实现鼠标拖拽多选功能示例
Aug 01 Javascript
vue 移动端记录页面浏览位置的方法
Mar 11 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 Javascript
Node 使用express-http-proxy 做api网关的实现
Oct 15 Javascript
antd的select下拉框因为数据量太大造成卡顿的解决方式
Oct 31 Javascript
详解jQuery的核心函数和事件处理
Feb 18 jQuery
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
php使用curl抓取qq空间的访客信息示例
2014/02/28 PHP
php中的四舍五入函数代码(floor函数、ceil函数、round与intval)
2014/07/14 PHP
浅析PHP关键词替换的类(避免重复替换,保留与还原原始链接)
2015/09/22 PHP
php similar_text()函数的定义和用法
2016/05/12 PHP
phpcms配置列表页以及获得文章发布时间
2017/07/04 PHP
PHP+Session防止表单重复提交的解决方法
2018/04/09 PHP
yii框架使用分页的方法分析
2019/07/25 PHP
php+ajax实现文件切割上传功能示例
2020/03/03 PHP
Thinkphp 框架扩展之行为扩展原理与实现方法分析
2020/04/23 PHP
javascript 写类方式之四
2009/07/05 Javascript
js实现屏蔽默认快捷键调用自定义事件示例
2013/06/18 Javascript
jQuery Mobile的loading对话框显示/隐藏方法分享
2013/11/26 Javascript
Jquery异步提交表单代码分享
2015/03/26 Javascript
js实现网页抽奖实例
2015/08/05 Javascript
浅谈Angular4中常用管道
2017/09/27 Javascript
JS复杂判断的更优雅写法代码详解
2018/11/07 Javascript
Vue中使用canvas方法总结
2019/02/12 Javascript
jQuery实现ajax的嵌套请求案例分析
2019/02/16 jQuery
Ant design vue中的联动选择取消操作
2020/10/31 Javascript
[37:03]完美世界DOTA2联赛PWL S3 INK ICE vs GXR 第二场 12.16
2020/12/18 DOTA
跟老齐学Python之大话题小函数(1)
2014/10/10 Python
提升Python程序运行效率的6个方法
2015/03/31 Python
pandas or sql计算前后两行数据间的增值方法
2018/04/20 Python
Python redis操作实例分析【连接、管道、发布和订阅等】
2019/05/16 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
利用CSS3实现单选框动画特效示例代码
2016/09/26 HTML / CSS
巴西最大的珠宝连锁店:Vivara
2019/04/18 全球购物
PyQt 如何创建自定义QWidget
2021/03/24 Python
大学生收银员求职信分享
2014/01/02 职场文书
中学生学雷锋活动心得体会
2014/03/10 职场文书
给校长的建议书100字
2014/05/16 职场文书
酒店开业庆典策划方案
2014/05/28 职场文书
小学班级特色活动方案
2014/08/31 职场文书
习近平在党的群众路线教育实践活动总结大会上的讲话
2014/10/21 职场文书
2016年六一文艺汇演开幕词
2016/03/04 职场文书
golang interface判断为空nil的实现代码
2021/04/24 Golang