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 汉字字节判断
Aug 01 Javascript
jquery中:input和input的区别分析
Jul 13 Javascript
js/jquery获取浏览器窗口可视区域高度和宽度以及滚动条高度实现代码
Dec 17 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(五)可移动地图的实现
Jan 23 Javascript
开源的javascript项目Kissy介绍
Nov 28 Javascript
jquery代码实现简单的随机图片瀑布流效果
Apr 20 Javascript
详谈JS中实现种子随机数及作用
Jul 19 Javascript
详解vue.js2.0父组件点击触发子组件方法
May 10 Javascript
js中less常用的方法小结
Aug 09 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
React diff算法的实现示例
Apr 20 Javascript
ES6新增的数组知识实例小结
May 23 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
全国FM电台频率大全 - 28 甘肃省
2020/03/11 无线电
检查url链接是否已经有参数的php代码 添加 ? 或 &amp;
2010/02/09 PHP
php Static关键字实用方法
2010/06/04 PHP
PHP开发注意事项总结
2015/02/04 PHP
php简单日历函数
2015/10/28 PHP
thinkphp5实现微信扫码支付
2019/12/23 PHP
js 页面执行时间计算代码
2009/03/04 Javascript
js调用activeX获取u盘序列号的代码
2011/11/21 Javascript
JS正则中的RegExp对象对象
2012/11/07 Javascript
js获取IP和PcName(IE)在vs中可用
2013/08/02 Javascript
jquery中邮箱地址 URL网站地址正则验证实例代码
2013/09/15 Javascript
使用upstart把nodejs应用封装为系统服务实例
2014/06/01 NodeJs
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
简单谈谈javascript Date类型
2015/09/06 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
Canvas 绘制粒子动画背景
2017/02/15 Javascript
微信小程序 仿美团分类菜单 swiper分类菜单
2017/04/12 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
详解Vue Elementui中的Tag与页面其它元素相互交互的两三事
2018/09/25 Javascript
基于Vue实现的多条件筛选功能的详解(类似京东和淘宝功能)
2019/05/07 Javascript
小程序新版订阅消息模板消息
2019/12/31 Javascript
[01:33]完美世界DOTA2联赛PWL S3 集锦第二期
2020/12/21 DOTA
Python采用Django开发自己的博客系统
2020/09/29 Python
python脚本替换指定行实现步骤
2017/07/11 Python
Pandas 同元素多列去重的实例
2018/07/03 Python
关于python下cv.waitKey无响应的原因及解决方法
2019/01/10 Python
python3 selenium自动化 下拉框定位的例子
2019/08/23 Python
Python使用plt.boxplot() 参数绘制箱线图
2020/06/04 Python
Python中的__init__作用是什么
2020/06/09 Python
python线程优先级队列知识点总结
2021/02/28 Python
实例教程 HTML5 Canvas 超炫酷烟花绽放动画实现代码
2014/11/05 HTML / CSS
个人工作主要事迹
2014/05/08 职场文书
六一儿童节开幕词
2015/01/29 职场文书
2015年五一劳动节活动总结
2015/02/09 职场文书
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技
腾讯云服务器部署前后分离项目之前端部署
2022/06/28 Servers