javascript弹性运动效果简单实现方法
更新时间：2016年01月08日 14:10:27 作者：lostyu
这篇文章主要介绍了javascript弹性运动效果简单实现方法,实例分析了JavaScript实现弹性运动的原理,涉及JavaScript数学运算与时间函数的相关使用技巧,需要的朋友可以参考下
本文实例讲述了javascript弹性运动效果简单实现方法。分享给大家供大家参考，具体如下：
弹性运动实现原理：加速运动+减速运动+摩擦运动
运行效果截图如下：
实例代码如下：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<style>
#div1{ width:100px; height:100px; background:red; position:absolute; left:0; top:50px;}
</style>
<script>
window.onload = function()
{
var oBtn = document.getElementById('btn1');
var oDiv = document.getElementById('div1');
oBtn.onclick = function()
{
startMove(oDiv, 300);
};
};
var iSpeed = 0;
var left = 0;
function startMove(obj, iTarget)
{
clearInterval(obj.timer);
obj.timer = setInterval(function(){
iSpeed += (iTarget - obj.offsetLeft)/5;
iSpeed *= 0.7;
left += iSpeed;
if(Math.abs(iSpeed)<1 && Math.abs(left-iTarget)<1){
clearInterval(obj.timer);
obj.style.left = iTarget + 'px';
}else{
obj.style.left = obj.offsetLeft + iSpeed + 'px';
}
}, 30);
}
</script>
</head>
<body>
<input id="btn1" type="button" value="运动" />
<div id="div1"></div>
<div style="width:1px; height:300px; background:black; position:absolute; top:0; left:300px; "></div>
</body>
</html>
更多关于JavaScript运动效果相关内容可查看本站专题：《JavaScript运动效果与技巧汇总》
希望本文所述对大家JavaScript程序设计有所帮助。
相关文章
这篇文章主要为大家详细介绍了微信小程序上传文件到阿里OSS教程，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-05-05
目前在做window.onerror时上报js错误信息的事，整理下相关资料,需要的朋友可以参考下2016-01-01
Bootstrap 支持最常见的表单控件，主要是 input、textarea、checkbox、radio 和 select。本文通过实例代码给大家讲解Bootstrap所支持的表单控件，感兴趣的朋友一起学习吧2016-05-05
这篇文章主要为大家详细介绍了js编写选项卡效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
这篇文章主要介绍了JavaScript中的浅拷贝和深拷贝原理与实现，JavaScript 中的浅拷贝和深拷贝指的是在复制对象（包括对象、数组等）时，是否只复制对象的引用地址或者在复制时创建一个新的对象2023-04-04
JavaScript表格排序实现代码，需要的朋友可以参考下。2009-10-10
这篇文章主要介绍了Rxjs 中怎么处理和抓取错误,本文，我们学习了如何使用 catchError 在数据流中抓取错误，怎么去修改和返回 observable，或者使用 EMPTY 不去触发组件中的错误，需要的朋友可以参考下2022-08-08
非jQuery实现照片散落桌子上，单击放大的LightBox效果
本文给大家介绍一款js实现的照片散落桌子上点击放大图片的LightBox效果，非常的炫酷，而且是非jQuery实现的，有需要的小伙伴可以参考下2014-11-11
这篇文章主要为大家详细介绍了js实现双人五子棋小游戏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2020-05-05
本文浅析一下为什么Map（和WeakMap）在处理大量DOM节点时特别有用，文中的代码示例介绍的非常详细，感兴趣的小伙伴可以借鉴阅读2023-05-05
最新评论