0x00 js的运动基础

先让div动起来，动起来之后设置一个条件让他停止运动，要不然他会一直运动下去

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}#div1{position: absolute;left:0;top:50px;width:200px;height:200px;background: blue;}</style>
</head>
<body>
<button onclick="moving()">开始运动</button><div id='div1'></div>
<script type="text/javascript">var oDiv=document.getElementById('div1')var timer =nullfunction moving(){timer = setInterval(function(){if(oDiv.offsetLeft>300){clearInterval(timer);}else{oDiv.style.left = oDiv.offsetLeft +1+'px';}},30);}
</script>
</body>
</html>

0x01 单物体运动框架

封装好一个方法，让外部传入目的地的值，即让物体停下来的值

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">*{margin:0;padding:0;}#div1{position: absolute;left:0;top:50px;width:200px;height:200px;background: blue;}</style>
</head>
<body>
<button onclick="moving(500)">开始运动</button><div id='div1'></div>
<script type="text/javascript">var oDiv=document.getElementById('div1')var timer =nullfunction moving(target){var speed = 0;if(oDiv.offsetLeft > target){speed = -7}else{speed = 7}timer = setInterval(function(){if(Math.abs(oDiv.offsetLeft-target)<=7){oDiv.style.left = target+'px';clearInterval(timer);}else{oDiv.style.left = oDiv.offsetLeft +speed+'px';}},30);}
</script>
</body>
</html>

0x02 多物体运动框架

封装一个方法让多个物体共用

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;}</style>
</head>
<body>
<div id='div1'></div>
<div></div>
<div></div>
<script type="text/javascript">var oDiv = document.getElementsByTagName('div');for(var i=0;i<oDiv.length;i++){oDiv[i].timer =null;oDiv[i].onmouseover = function(){moving(this,400);};oDiv[i].onmouseout = function(){moving(this,100);};}function moving(obj,target){clearInterval(obj.timer);var speed =(target-obj.offsetHeight)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){if(Math.abs(obj.offsetHeight-target)<=Math.abs(speed)){obj.style.height=target+'px';clearInterval(obj.timer);}else{obj.style.height = obj.offsetHeight + speed+'px';}},30)}
</script></body>
</html>

0x03 改变单一任意值运动框架

在多物体运动框架的基础上增加一些修改样式的参数

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style>
</head>
<body>
<div id='div1'>西北老汉</div>
<div>空条承太郎</div>
<div>乔瑟夫乔斯达</div>
<script type="text/javascript">var oDiv = document.getElementsByTagName('div');oDiv[0].timer =null;oDiv[0].onmouseover = function(){moving(this,'fontSize',50);};oDiv[0].onmouseout = function(){moving(this,'fontSize',12);};oDiv[1].timer =null;oDiv[1].onmouseover = function(){moving(this,'width',400);};oDiv[1].onmouseout = function(){moving(this,'width',100);};oDiv[2].timer =null;oDiv[2].onmouseover = function(){moving(this,'height',400);};oDiv[2].onmouseout = function(){moving(this,'height',100);};// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,attr,target){clearInterval(obj.timer);// 获取要修改属性的值var currvalue=parseInt(getStyleValue(obj,attr));var speed =(target-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){currvalue=parseInt(getStyleValue(obj,attr));if(Math.abs(currvalue-target)<=Math.abs(speed)){obj.style[attr]= target+'px';clearInterval(obj.timer);}else{obj.style[attr] = currvalue + speed+'px';}},30)}
</script></body>
</html>

0x04 链式运动框架

在改变单一任意值运动框架的基础上添加一个回调函数参数

链式运动顾名思义就是先运动完一个值再运动另一个。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,'width',400,function(){moving(oDiv2,'height',400);});};oDiv3.onclick = function(){moving(oDiv2,'height',100,function(){moving(oDiv2,'width',100);});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,attr,target,callbackfun){clearInterval(obj.timer);// 获取要修改属性的值var currvalue=parseInt(getStyleValue(obj,attr));var speed =(target-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);obj.timer = setInterval(function(){currvalue=parseInt(getStyleValue(obj,attr));if(Math.abs(currvalue-target)<=Math.abs(speed)){obj.style[attr]= target+'px';clearInterval(obj.timer);if(callbackfun){callbackfun();}}else{obj.style[attr] = currvalue + speed+'px';}},30)}
</script></body>
</html>

0x05 改变多值运动框架

同时改变多个我们需要改变的样式值，不像链式操作那样需要等待前一个完成才可以执行下一个

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">#div1,div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,{"width":400,"height":400,"font-size":30});};oDiv3.onclick = function(){moving(oDiv2,{"width":100,"height":100,"font-size":10});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,json){clearInterval(obj.timer);obj.timer = setInterval(function(){// 判断所有运动是否已完成var isClear= true;for(var attr in json){var currvalue=parseInt(getStyleValue(obj,attr));var speed =(json[attr]-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);if(currvalue!=json[attr]){isClear=false;obj.style[attr] = currvalue + speed+'px';}}if(isClear == true){clearInterval(obj.timer);}},30)}
</script></body>
</html>

0x06 完美运动框架

在多值运动框架的基础上考虑运动完之后传入回调函数

注意改变透明度opacity需要做特殊处理

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title></title><style type="text/css">div{float:left;height:100px;width:100px;background:black;margin-left:20px;font-size: 10px;color:green;}#div2{/*兼容ie的写法*/filter: alpha(opacity:30);/*兼容非ie的写法*/opacity:0.3; /*写0到1之间的数，修改透明度*/}</style>
</head>
<body>
<div id='div1'>点击我展开</div>
<div id='div2'>空条承太郎</div>
<div id='div3'>点击我收起</div>
<script type="text/javascript">var oDiv1 = document.getElementById('div1');var oDiv2 = document.getElementById('div2');var oDiv3 = document.getElementById('div3');oDiv1.timer=oDiv2.timer =oDiv3.timer=null;oDiv1.onclick = function(){moving(oDiv2,{"width":400,"height":400,"font-size":30,'opacity':100},function(){alert("我已经执行完了");});};oDiv3.onclick = function(){moving(oDiv2,{"width":100,"height":100,"font-size":10,'opacity':30});}// 返回对象obj的attr属性function getStyleValue(obj,attr){if(obj.currentStyle){return obj.currentStyle[attr];}else{return getComputedStyle(obj,false)[attr];}}function moving(obj,json,callbackfun){clearInterval(obj.timer);obj.timer = setInterval(function(){// 判断所有运动是否已完成var isClear= true;for(var attr in json){var currvalue=0;if(attr=='opacity'){currvalue=Math.round(getStyleValue(obj,attr)*100);// Math.round()四舍五入}else{currvalue=parseInt(getStyleValue(obj,attr));}var speed =(json[attr]-currvalue)/8;speed = speed>0?Math.ceil(speed):Math.floor(speed);if(currvalue!=json[attr]){isClear=false;if(attr=='opacity'){obj.style.filter="opacity(alpha:"+currvalue+speed+')';obj.style.opacity=(currvalue+speed)/100;}else{obj.style[attr] = currvalue + speed+'px';}}}if(isClear == true){clearInterval(obj.timer);if(callbackfun){callbackfun();}}},30)}
</script></body>
</html>

JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架相关推荐

完美运动框架(js)
一.前言学习js运动时,由于在实现多种不同运动效果过程中很多代码是重复的,故将其封装达到代码重用. 二.代码封装重用 function startMove(obj, json, fnEnd){cle ...
JS完美运动框架详解——原理分析及demo
1.运动原理 Js运动,本质来说,就是让 web 上 DOM 元素动起来.而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等.还有一个很重要的前提是,运动的物体必须是绝对 ...
视频教程-WebGL 可视化3D绘图框架：Three.js 零基础上手实战-其他
WebGL 可视化3D绘图框架:Three.js 零基础上手实战网名风舞烟,中国科技大学计算机专业.微软认证讲师(MCE).微软数据分析讲师.10多年软件行业从业经验,参与过数百万的企业级ERP系统 ...
ae制作小球轨迹运动_在AE里如何让物体沿着路径运动？
如何让物体精确的沿着路径轨迹运动, 手动K帧也能创造出曲线运动,但控制比较麻烦,而且不精确, 用钢笔绘制运动路径可以精确的让物体沿着路径运动,控制简单. 一.创建物体 1.新建一个AE合成,选择HDT ...
JS通用表单验证函数
Check.js JS函数文件 /* *--------------- 客户端表单通用验证CheckForm(oForm) ----------------- * 功能:通用验证所有的表单元素 ...
【30分钟学完】canvas动画|游戏基础(7)：动量守恒与多物体碰撞
前言一路沿着本系列教程学习的朋友可能会发现,前面教程中都尽量避免提及质量的概念,很多运动概念也时刻提醒大家这不是真实的物体运动.因为真实的物体运动其实跟质量都是密不可分的,而且质量的引入自然必须提及 ...
angular js创建表单_如何优雅的使用 Angular 表单验证
随便说说,这一节可以跳过去年参加 ngChine 2018 杭州开发者大会的时候记得有人问我: Worktile 是什么时候开始使用 Angular 的,我说是今年(2018年) 3 月份开始在新模 ...
【JavaScript】JS的基础知识
JavaScript 一.什么是JavaScript? 二.JavaScript的用途三.JS是如何运行的? 四.JS前置知识 4.1 JS书写格式 4.1.1 行内格式 4.1.2 内嵌格式 4. ...
Java埋码_oCPC JS SDK 基础代码安装指南
oCPC JS SDK 基础代码安装指南最后更新时间:2020.04.10 安装步骤获取代码以下代码为SDK的安装代码.注:production值唯一,所有客户共用同一值,百度根据数据来源自动区 ...

JavaScriptDay08:js运动基础，单物体运动框架，多物体运动框架，改变单一任意值运动框架，改变多值运动框架，完美运动框架