JS实现的小火箭发射动画效果示例
程序员文章站
2022-03-13 17:13:48
本文实例讲述了js实现的小火箭发射动画效果。分享给大家供大家参考，具体如下：
本文实例讲述了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程序设计有所帮助。
上一篇： 学习笔记-Vue.js 配置、创建、运行Vue项目
下一篇： express 项目分层实践详解