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程序设计有所帮助。

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

推荐度：

点击下载本文 文档为doc格式

标签：小火箭动画实现

热门焦点

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

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

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

最新推荐

猜你喜欢

热门推荐