首页开发技术正文

使用JavaScript怎么实现一个小火箭发射动画效果

爱秀

作者

这期内容当中小编将会给大家带来有关使用JavaScript怎么实现一个小火箭发射动画效果，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。

具体如下：

<!DOCTYPEhtml>
<htmllang="en">
<head>
<metacharset="UTF-8">
<title>小火箭发射</title>
<styletype="text/css">
*{
margin:0px;
padding:0px;
}
.big{
width:500px;
height:600px;
border:1pxsolid#16283B;
float:left;
position:relative;
background-color:#16283B;
}
.btm{
height:40px;
width:100px;
background-color:royalblue;
cursor:pointer;
border:1pxsolidblue;
float:left;
position:relative;
top:560px;
left:40px;
}
.btmspan{
line-height:40px;
width:100px;
display:block;
text-align:center;
}
.bt_stop{
height:40px;
width:100px;
background-color:royalblue;
cursor:pointer;
border:1pxsolidblue;
float:left;
position:relative;
top:500px;
left:-60px;
}
.bt_stopspan{
line-height:40px;
width:100px;
display:block;
text-align:center;
}
.rocket{
position:absolute;
bottom:18px;
left:180px;
}
</style>
<scripttype="text/javascript">
//alert("iswork!");
//任务1火箭起飞
//任务2火箭悬停
varstart;
function$(id){
returndocument.getElementById(id);
}
functionfly(){
start=self.setInterval("fly_do()",10);
}
functionstart_send(){
alert('start');
fly();
}
functionstop(){
//alert('stop');
window.clearInterval(start);
}
functiongetBottom(rocket){
varbottomf=rocket.style.bottom;
bottomf=parseInt(bottomf);
if(!bottomf){
bottomf=18;
}
bottomf++;
returnbottomf;
}
functionfly_do(){
//alert("thisisfly");
//通过不断改变rocket里面的css属性bottom
//获取rocket对象
varrocket=$("yingshanhao");
varbottomf=getBottom(rocket);
//改变属性
rocket.style.bottom=bottomf+"px";
//慢慢飞起来
//js的时间函数
}
</script>
</head>
<body>
<divclass="big">
<divclass="rocket"id="yingshanhao">
<imgsrc="images/rocket1.jpg">
</div>
</div>
<divclass="btm"onmouseover="javascript:stop();"onmouseout="javascript:start_send();">
<span>悬停按钮</span>
</div>
<divclass="bt_stop"onclick="javascript:fly();">
<span>发射按钮</span>
</div>
</div>
</body>
</html>

上述就是小编为大家分享的使用JavaScript怎么实现一个小火箭发射动画效果了，如果刚好有类似的疑惑，不妨参照上述分析进行理解。如果想知道更多相关知识，欢迎关注恰卡编程网行业资讯频道。

阅读全文

发布于 2021-04-15 01:56:33

javascript

分享空间
分享微博
手机扫一扫

海报

167

上一篇：如何使用jQuery遍历复选框下一篇：使用Python怎么实现邮件发送功能

推荐阅读