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程序设计有所帮助。
相关推荐
-
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
本文实例讲述了JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果.分享给大家供大家参考,具体如下: 基于Sketch.js,实现了物体触碰检测(蝌蚪会遇到障碍物以及聪明的躲避鼠标的点击),随机运动,聚集算法等. 已经具备了游戏的基本要素,扩展一下可以变成一个不错的 HTML5 游戏. 演示效果如下: 完整代码如下: <!DOCTYPE html> <html class=" -webkit- js flexbox canvas canvastext webgl no-
-
Javascript 完美运动框架(逐行分析代码，让你轻松了运动的原理)
大家一听这名字就知道,有了这套框架 网上的效果基本都是可以实现的.实际上之前的运动框架还是有局限性的,就是不能让好几个值一块运动. 那这个问题怎么解决呢? 我们先来看看之前的运动框架 function getStyle(obj, name) { if (obj.currentStyle) { return obj.currentStyle[name]; } else { return getComputedStyle(obj, null)[name]; } } function startMov
-
javascript实现10个球随机运动、碰撞实例详解
本文实例讲述了javascript实现10个球随机运动.碰撞的方法.分享给大家供大家参考.具体如下: 学了一段时间的javascript了,做过一些小案例,目前最有难度的就是10个小球随机碰撞效果,这不,把它上上来与大家分享一下,相信不少和我一样的菜鸟在开始上手编程时都会有不少的困惑,希望它能给一些人带来帮助. 效果要求:10个小球在页面随机移动,碰到窗口边界或其他小球都会反弹 思路: 1.10个小球是10个div; 2.碰窗口反弹,定义vx vy为小球的移动变量,以及一个弹力变量bounce(
-
js实现缓冲运动效果的方法
本文实例讲述了js实现缓冲运动效果的方法.分享给大家供大家参考.具体分析如下: 该实例可实现一开始速度很快,然后慢下来,直到停止的效果. 要点: var speed = (target-box.offsetLeft)/8; 目标点减去元素的当前位置的值除以8,因为offsetleft的值是一直在变大,所以速度的值也是一直的变小 speed = speed>0?Math.ceil(speed):Math.floor(speed); 正向速度的时候向上取整,反向速度的时候向下取整 代码: <!DO
-
Js实现简单的小球运动特效
废话不多说了,直接给大家贴js代码了,具体代码如下所示: <!DOCTYPE html> <html> <head> <title></title> <meta http-equiv="content-type" content="text/html;charset=utf-"/> </head> <body style="background:pink;"
-
js运动动画的八个知识点
今天简单的学了一下js运动动画,记录一下自己的心得体会,分享给大家. 下面是我整理出来的结果. 知识点一:速度动画. 1.首先第一步实现速度运动动画,封装一个函数,用到的知识是setInterval(function(){ 复制代码 代码如下: oDiv.style.left=oDiv.offsetLeft+10+"px"; },30). 对于这里为什么要用到offsetLeft,我特意百度了一下,我得到的有用信息是: a.offsetLeft和left的相同之处都是表示子节点相对于父
-
JS运动框架之分享侧边栏动画实例
本文实例讲述了JS运动框架之分享侧边栏动画实现方法.分享给大家供大家参考.具体实现方法如下: 复制代码 代码如下: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css">
-
javascript动画之圆形运动,环绕鼠标运动作小球
代码如下: 复制代码 代码如下: <script type="text/javascript"> var ball; var mouseX = 100; var mouseY = 100; var angle = 0; var radius = 50; function run(){ if(ball === undefined){ ball = document.createElement("span"); ball.style.position = &
-
js弹性势能动画之抛物线运动实例详解
抛物线运动就是:当拖拽结束的时候,我们让当前的元素同时水平运动+垂直运动 在同样的移动距离下,我们鼠标移动的速度快,move方法触发的次数少,相反移动的速度慢,move方法触发的次数就多->浏览器对于每一次的move行为的触发都是由一个最小时间的. 通过观察,我们发现一个事情:水平方向我们盒子在结束拖拽的时候移动的速度和移动的距离没有必然的联系,和开始拖拽的速度也没有必然的联系,只和最后一次即将松开的那一瞬间鼠标的速度是有关系的,最后瞬间鼠标如果移动的快,我们水平运动的距离和速度也是比较大的.-
-
JS实现匀速运动的代码实例
效果: 思路: 利用setInerval()计时器,进行运动.然后关键的一点是在最后停止的时候给它一个填充缝隙的判断. 代码: 复制代码 代码如下: <head runat="server"> <title></title> <style type="text/css"> #div1 { width: 100px; height: 10
-
原生javascript实现匀速运动动画效果
本文向大家介绍一个javascript实现的动画.点击开始按钮div会往右移动,点击停止后,div停止移动,再点击则继续移动.请看下面代码: <html> <head> <meta charset="gb2312"> <head> <title>javascript实现的简单动画</title> <style type="text/css"> #mydiv { width:50px;
-
JS实现匀速与减速缓慢运动的动画效果封装示例
本文实例讲述了JS实现匀速与减速缓慢运动的动画效果.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>www.jb51.net JS匀速/减速运动</title> <style> *{ margin: 0; padding: 0; } .box1 { width