JavaScript运动减速效果实例分析


Posted in Javascript onAugust 04, 2015

本文实例讲述了JavaScript运动减速效果。分享给大家供大家参考。具体如下:

这段代码可帮助利用JS从事游戏编程的朋友,它主要实现一种运行减速缓冲的效果,代码精简,很不错。

运行效果如下图所示:

JavaScript运动减速效果实例分析

具体代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>JavaScript运动减速效果</title>
</head>
<body>
<div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">
<div id="aa" style="width:50px; height:50px; background:#930; position:absolute;"></div>
</div>
<div id="x"></div>
<div style=" position:relative; border:1px solid #000000; width:550px; height:50px;">
<div id="bb" style="width:50px; height:50px; background:#0000FF; position:absolute;"></div>
</div>
<div id="y"></div>
<script>
var $ = function (id) {
 return "string" == typeof id ? document.getElementById(id) : id;
};
var ss = 0;
var s = 500;
var tt = 300;
var a = 2*s/(tt*tt);
var o = $("aa");
var i = 0;
var t = 0;
function run(){
 t++;
 i = parseInt((a*tt)*t - .5 * a * (t*t));
 if(i>=s){ o.style.left = ss + s + "px"; return; }
 o.style.left = ss + i + "px";
 $("x").innerHTML+=i+",";
 setTimeout(run, 10);
}
run();
var s2 = 500;
var o2 = $("bb");
var i2 = 0;
function run2(){
 var s = (s2-i2)/100;
 if(s>0 && s < 1){ s=1; };
 if(s==0 || i2 + s>=s2){ o2.style.left = ss + s2 + "px"; return; }
 o2.style.left = ss + i2 + s + "px";
 i2=i2 + s;
 $("y").innerHTML+=parseInt(i2 + s)+",";
 setTimeout(run2, 10);
}
run2();
</script>
</body>
</html>

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

Javascript 相关文章推荐
javascript 事件处理程序介绍
Jun 27 Javascript
浅谈javascript六种数据类型以及特殊注意点
Dec 20 Javascript
在JS数组特定索引处指定位置插入元素的技巧
Aug 24 Javascript
深入理解JavaScript中的对象
Jun 04 Javascript
JavaScript多图片上传案例
Sep 28 Javascript
AngularJS基础 ng-switch 指令简单示例
Aug 03 Javascript
JavaScript截屏功能的实现代码
Jul 28 Javascript
JavaScript实现的仿新浪微博原生态输入字数即时检查功能【兼容IE6】
Sep 26 Javascript
如何从0开始用node写一个自己的命令行程序
Dec 29 Javascript
在JavaScript中使用严格模式(Strict Mode)
Jun 13 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
使用p5.js临摹动态图片
Nov 04 Javascript
JavaScript仿静态分页实现方法
Aug 04 #Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 #Javascript
Javascript实现可旋转的圆圈实例代码
Aug 04 #Javascript
JavaScript数组各种常见用法实例分析
Aug 04 #Javascript
基于Jquery实现表单验证
Jul 20 #Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
Aug 04 #Javascript
jq实现左侧显示图片右侧文字滑动切换效果
Aug 04 #Javascript
You might like
很温暖很温暖的Lester Young
2021/03/03 冲泡冲煮
Ajax+PHP边学边练 之五 图片处理
2009/12/03 PHP
PHP导入Excel到MySQL的方法
2011/04/23 PHP
PHP对MongoDB[NoSQL]数据库的操作
2013/03/01 PHP
详解PHP内置访问资源的超时时间 time_out file_get_contents read_file
2013/06/03 PHP
深入extjs与php参数交互的详解
2013/06/25 PHP
ThinkPHP自动完成中使用函数与回调方法实例
2014/11/29 PHP
浅谈php中的访问修饰符private、protected、public的作用范围
2016/11/20 PHP
Javascript 对象的解释
2008/11/24 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
2012/12/25 Javascript
NodeJS Web应用监听sock文件实例
2015/02/18 NodeJs
js小数计算小数点后显示多位小数的实现方法
2016/05/30 Javascript
JavaScript的this关键字的理解
2016/06/18 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
Vue实现选择城市功能
2017/05/27 Javascript
Vue.js中对css的操作(修改)具体方式详解
2018/10/30 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
详解JavaScript中关于this指向的4种情况
2019/04/18 Javascript
从零撸一个pc端vue的ui组件库( 计数器组件 )
2019/08/08 Javascript
解决layui追加或者动态修改的表单元素“没效果”的问题
2019/09/18 Javascript
Vue Router 实现动态路由和常见问题及解决方法
2020/03/06 Javascript
python编写暴力破解FTP密码小工具
2014/11/19 Python
python中实现精确的浮点数运算详解
2017/11/02 Python
Django中URL的参数传递的实现
2019/08/04 Python
Python使用py2neo操作图数据库neo4j的方法详解
2020/01/13 Python
Python绘制组合图的示例
2020/09/18 Python
优质有机椰子产品:Dr. Goerg
2019/09/24 全球购物
诚信承诺书模板
2014/05/26 职场文书
商务英语专业求职信
2014/06/26 职场文书
学生无故旷课检讨书
2014/09/20 职场文书
何玥事迹观后感
2015/06/16 职场文书
研讨会致辞
2015/07/31 职场文书
给学校的建议书400字
2015/09/14 职场文书
分享:关于学习的励志名言赏析
2019/08/16 职场文书
Oracle 临时表空间SQL语句的实现
2021/09/25 Oracle
Python 匹配文本并在其上一行追加文本
2022/05/11 Python