好资源导航 » 文章资讯 » JS实现的小火箭发射动画效果示例

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

2023-09-04 17:27:05 67

本文实例讲述了JS实现的小火箭发射动画效果。分享给大家供大家参考，具体如下：





小火箭发射

*{
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;
}


//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的时间函数
}

悬停按钮

发射按钮

感兴趣的朋友可以使用在线HTML/CSS/JavaScript代码运行工具：http://tools.jb51.net/code/HtmlJsRun测试一下运行效果。

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript运动效果与技巧汇总》、《JavaScript切换特效与技巧总结》、《JavaScript查找算法技巧总结》、《JavaScript动画特效与技巧汇总》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》、《JavaScript遍历算法与技巧总结》及《JavaScript数学运算用法总结》

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

返回顶部
514930285
czq8825@qq.com

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

热门推荐

随机推荐