javascript弹性运动效果简单实现方法


Posted in Javascript onJanuary 08, 2016

本文实例讲述了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程序设计有所帮助。

Javascript 相关文章推荐
理解Javascript_13_执行模型详解
Oct 20 Javascript
在标题栏显示新消息提示,很多公司项目中用到这个方法
Nov 04 Javascript
jQuery fadeTo方法调整图片的透明度使用介绍
May 06 Javascript
js实现时间显示几天前、几小时前或者几分钟前的方法集锦
May 29 Javascript
jquery动画效果学习笔记(8种效果)
Nov 13 Javascript
正则中的回溯定义与用法分析【JS与java实现】
Dec 27 Javascript
jQuery基于ajax实现页面加载后检查用户登录状态的方法
Feb 10 Javascript
Express + Session 实现登录验证功能
Sep 08 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
vue.js使用v-model实现表单元素(input) 双向数据绑定功能示例
Mar 08 Javascript
bootstrap datepicker的基本使用教程
Jul 09 Javascript
Vue实现简单的拖拽效果
Aug 25 Javascript
javascript运动效果实例总结(放大缩小、滑动淡入、滚动)
Jan 08 #Javascript
javascript运动框架用法实例分析(实现放大与缩小效果)
Jan 08 #Javascript
jquery实现简单的遮罩层
Jan 08 #Javascript
javascript多物体运动实现方法分析
Jan 08 #Javascript
jQuery插件之Tocify动态节点目录菜单生成器附源码下载
Jan 08 #Javascript
javascript匀速运动实现方法分析
Jan 08 #Javascript
js如何改变文章的字体大小
Jan 08 #Javascript
You might like
一个取得文件扩展名的函数
2006/10/09 PHP
PHP array_flip() 删除重复数组元素专用函数
2010/05/16 PHP
PHP5.3安装Zend Guard Loader图文教程
2014/09/29 PHP
Yii2实现ajax上传图片插件用法
2016/04/28 PHP
PHP基于pdo的数据库操作类【可支持mysql、sqlserver及oracle】
2018/05/21 PHP
PHP利用递归函数实现无限级分类的方法
2019/03/22 PHP
PHP中常用的三种设计模式详解【单例模式、工厂模式、观察者模式】
2019/06/14 PHP
php提供实现反射的方法和实例代码
2019/09/17 PHP
javascript比较文档位置
2008/04/08 Javascript
禁止空格提交表单的js代码
2013/11/17 Javascript
javascript 循环调用示例介绍
2013/11/20 Javascript
一个JavaScript去除字符串末尾的空白实例代码
2014/09/22 Javascript
JS如何生成一个不重复的ID的函数
2016/12/25 Javascript
JS中使用media实现响应式布局
2017/08/04 Javascript
Bootstrap Tooltip显示换行和左对齐的解决方案
2017/10/11 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
如何为vuex实现带参数的 getter和state.commit
2019/01/04 Javascript
JS使用iView的Dropdown实现一个右键菜单
2019/05/06 Javascript
微信小程序页面上下滚动效果
2020/11/18 Javascript
详解Nuxt.js中使用Element-UI填坑
2019/09/06 Javascript
vue实现动态表格提交参数动态生成控件的操作
2020/11/09 Javascript
基于pycharm导入模块显示不存在的解决方法
2018/10/13 Python
Python使用pydub库对mp3与wav格式进行互转的方法
2019/01/10 Python
如何通过python的fabric包完成代码上传部署
2019/07/29 Python
OpenCV中VideoCapture类的使用详解
2020/02/14 Python
使用css3匹配手机屏幕横竖状态
2014/01/27 HTML / CSS
HTML5的结构和语义(3):语义性的块级元素
2008/10/17 HTML / CSS
HTML5新特性之用SVG绘制微信logo
2016/02/03 HTML / CSS
描述内存分配方式以及它们的区别
2016/10/15 面试题
开业庆典邀请函
2014/01/08 职场文书
政府绩效管理实施方案
2014/05/04 职场文书
群众路线教育实践活动心得体会(教师)
2014/10/31 职场文书
学校拾金不昧表扬信
2015/01/16 职场文书
寻找成龙观后感
2015/06/12 职场文书
CSS实现两列布局的N种方法
2021/08/02 HTML / CSS
Python selenium绕过webdriver监测执行javascript
2022/04/12 Python