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 相关文章推荐
基于jquery的划词搜索实现(备忘)
Sep 14 Javascript
基于jquery的多功能软键盘插件
Jul 25 Javascript
Js日期选择自动填充到输入框(界面漂亮兼容火狐)
Aug 02 Javascript
JavaScript简单实现鼠标拖动选择功能
Mar 06 Javascript
用jQuery toggleClass 实现鼠标移上变色
May 14 Javascript
bootstrap改变按钮加载状态
Dec 01 Javascript
JS实现从表格中动态删除指定行的方法
Mar 31 Javascript
js编写三级联动简单案例
Dec 21 Javascript
js实现图片加载淡入淡出效果
Apr 07 Javascript
微信小程序上传图片到服务器实例代码
Nov 07 Javascript
ajaxfileupload.js实现上传文件功能
Apr 19 Javascript
JQuery使用数组遍历跳出each循环
Sep 01 jQuery
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
php cout&amp;lt;&amp;lt;的一点看法
2010/01/24 PHP
PHP错误抑制符(@)导致引用传参失败Bug的分析
2011/05/02 PHP
两级联动select刷新后其值保持不变的实现方法
2014/01/27 PHP
ThinkPHP使用心得分享-ThinkPHP + Ajax 实现2级联动下拉菜单
2014/05/15 PHP
javascript web页面刷新的方法收集
2009/07/02 Javascript
基于jQuery实现的百度导航li拖放排列效果,即时更新数据库
2012/07/31 Javascript
JavaScript在XHTML中的用法详解
2013/04/11 Javascript
jquery在项目中做复选框时遇到的一些问题笔记
2013/11/17 Javascript
使用JavaScript实现网页版Pongo设计思路及源代码分享
2014/06/16 Javascript
Javascript Memoizer浅析
2014/10/16 Javascript
jquery实现像栅栏一样左右滑出式二级菜单效果代码
2015/08/24 Javascript
Js+Ajax,Get和Post在使用上的区别小结
2016/06/08 Javascript
JavaScript中最容易混淆的作用域、提升、闭包知识详解(推荐)
2016/09/05 Javascript
jQuery.form.js的使用详解
2017/06/14 jQuery
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
浅谈Vue路由快照实现思路及其问题
2018/06/07 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
深入了解js原型模式
2019/05/30 Javascript
layui 实现表单和文件上传一起传到后台的例子
2019/09/16 Javascript
Vue+ElementUI table实现表格分页
2019/12/14 Javascript
element 中 el-menu 组件的无限极循环思路代码详解
2020/04/26 Javascript
[01:35]辉夜杯战队访谈宣传片—iG.V
2015/12/25 DOTA
速记Python布尔值
2017/11/09 Python
Tensorflow中的placeholder和feed_dict的使用
2018/07/09 Python
python scatter函数用法实例详解
2020/02/11 Python
Python Spyder 调出缩进对齐线的操作
2021/02/26 Python
HTML5表格_动力节点Java学院整理
2017/07/11 HTML / CSS
世界上最大的隐形眼镜商店:1-800 Contacts
2018/11/03 全球购物
在印度上传处方,在线订购药品:Medlife
2019/03/28 全球购物
光电信息专业应届生求职信
2013/10/07 职场文书
会计主管岗位职责范文
2013/11/08 职场文书
日语专业推荐信
2013/11/12 职场文书
高中运动会广播稿
2014/01/21 职场文书
人事专员工作职责
2014/02/22 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
好段摘抄大全(48句)
2019/08/08 职场文书