1.运动原理
Js运动,本质来说,就是让 web 上 DOM 元素动起来。而想要 DOM 动起来,改变其自身的位置属性,比如高宽,左边距,上边距,透明度等。还有一个很重要的前提是,运动的物体必须是绝对定位。
- window.onload = function(){
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function(){
- var oDiv = document.getElementById('div1');
- //设置定时器
- setInterval(function(){
- //改变物体位置
- oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
- },30)
- }
- }
- window.onload = function(){
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function(){
- var oDiv = document.getElementById('div1');
- //设置定时器
- var timer = setInterval(function(){
- //判断停止条件
- if(oDiv.offsetLeft > 300){
- clearInterval(timer);
- }else{
- //改变物体位置
- oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
- document.title = oDiv.offsetLeft;
- }
- },30);
- }
- }
2,运动框架 (滑入滑出,淡入淡出)
- window.onload = function(){
- var oBtn = document.getElementById('btn');
- oBtn.onclick = function(){
- startMove();
- }
- }
- var timer = null;
- function startMove(){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- //设置定时器
- timer = setInterval(function(){
- //判断停止条件
- if(oDiv.offsetLeft > 300){
- clearInterval(timer);
- }else{
- //改变物体位置
- oDiv.style.left = oDiv.offsetLeft + 10 + 'px';
- document.title = oDiv.offsetLeft;
- }
- },30);
- }
1.先清除定时器
2.开启定时器,计算速度
3.判断停止条件,执行运动
- var timer = null;
- function startMove(){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- //计算速度
- var iSpeed = 10;
- //设置定时器
- timer = setInterval(function(){
- //判断停止条件
- if(oDiv.offsetLeft > 300){
- clearInterval(timer);
- }else{
- //改变物体位置
- oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
- document.title = oDiv.offsetLeft;
- }
- },30);
- }
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS运动——分享到</title>
- <style>
- *{padding: 0; margin: 0;}
- #div1{ width: 150px; height: 200px; background: #ccc; position: absolute; left: -150px;}
- #div1 span{ width: 20px; height: 60px; line-height: 20px; background: #8E91FF; color: #fff; position: absolute; top: 70px; right: -20px;}
- </style>
- <script>
- // 方法一:传一个参数(iTarget)
- /*window.onload = function(){
- var oDiv = document.getElementById('div1');
- var timer = null;
- oDiv.onmouseover = function(){
- startMove(0);
- };
- oDiv.onmouseout = function(){
- startMove(-150);
- };
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- var speed = 0;
- oDiv.offsetLeft > iTarget ? speed = -10 : speed = 10;
- if(oDiv.offsetLeft == iTarget){
- clearInterval(timer);
- }else{
- oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },30);
- };
- };*/
- // 方法二:传两个参数(speed,iTarget)
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- var timer = null;
- oDiv.onmouseover = function(){
- startMove(10,0);
- };
- oDiv.onmouseout = function(){
- startMove(-10,-150);
- };
- function startMove(speed,iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- // 判断oDiv距离左边的距离是否等于目标点
- if(oDiv.offsetLeft == iTarget){
- clearInterval(timer);
- }else{
- oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },30);
- };
- };
- </script>
- </head>
- <body>
- <div id="div1"><span>分享到</span></div>
- </body>
- </html>
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS运动——淡入淡出</title>
- <style>
- #div1{ width: 100px; height: 100px; background: green; position: absolute; filter:alpha(opacity:30); opacity: .3;}
- </style>
- <script>
- /*window.onload = function(){
- var oDiv = document.getElementById('div1');
- var timer = null;
- var alpha = 30;
- oDiv.onmouseover = function(){
- startMove(100);
- };
- oDiv.onmouseout = function(){
- startMove(30);
- };
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- var speed = 0;
- if(alpha < iTarget){
- speed = 10;
- }else{
- speed = -10;
- }
- if(alpha == iTarget){
- clearInterval(timer);
- }else{
- alpha += speed;
- oDiv.style.filter = 'alpha(opacity:' + alpha +')';
- oDiv.style.opacity = alpha/100;
- }
- },30);
- };
- };*/
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- var timer = null;
- var alpha = 30;
- oDiv.onmouseover = function(){
- startMove(10,100);
- };
- oDiv.onmouseout = function(){
- startMove(-10,30);
- };
- function startMove(speed,iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- if(alpha == iTarget){
- clearInterval(timer);
- }else{
- alpha += speed;
- oDiv.style.filter = 'alpha(opacity:' + alpha +')';
- oDiv.style.opacity = alpha/100;
- }
- },30);
- }
- };
- </script>
- </head>
- <body>
- <div id="div1"></div>
- </body>
- </html>
匀速运动的停止条件:距离足够近
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>匀速运动</title>
- <style>
- #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
- #div2 {width:1px; height:300px; position:absolute; left:300px; top:0; background:black;}
- #div3 {width:1px; height:300px; position:absolute; left:100px; top:0; background:black;}
- </style>
- <script>
- /*
- 匀速运动的停止条件
- 距离足够近
- */
- /*var timer=null;
- function startMove(iTarget)
- {
- var oDiv=document.getElementById('div1');
- clearInterval(timer);
- timer=setInterval(function (){
- var speed=0;
- if(oDiv.offsetLeft<iTarget)
- {
- speed=7;
- }
- else
- {
- speed=-7;
- }
- if(Math.abs(iTarget-oDiv.offsetLeft)<=7)
- {
- clearInterval(timer);
- oDiv.style.left=iTarget+'px';
- }
- else
- {
- oDiv.style.left=oDiv.offsetLeft+speed+'px';
- }
- }, 30);
- }*/
- window.onload = function(){
- var oBtn1 = document.getElementById('btn1');
- var oBtn2 = document.getElementById('btn2');
- var oDiv = document.getElementById('div1');
- var timer = null;
- oBtn1.onclick = function(){
- startMove(100);
- };
- oBtn2.onclick = function(){
- startMove(300);
- };
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- var speed = 0;
- if(oDiv.offsetLeft < iTarget ){
- speed = 7;
- }else{
- speed = -7;
- }
- if(Math.abs(iTarget - oDiv.offsetLeft)<=7){
- clearInterval(timer);
- oDiv.style.left = iTarget + 'px';
- }else{
- oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- }
- },30);
- };
- };
- </script>
- </head>
- <body>
- <!-- <input type="button" value="到100" onclick="startMove(100)" />
- <input type="button" value="到300" onclick="startMove(300)" /> -->
- <input id="btn1" type="button" value="运动到100" />
- <input id="btn2" type="button" value="运动到300" />
- <div id="div1"></div>
- <div id="div2"></div>
- <div id="div3"></div>
- </body>
- </html>
缓冲运动原理就是,改变速度的值。每次累加的速度值变小,就是会是整个物体看起来越来越慢,以至于最后停掉。
- window.onload = function(){
- var btn = document.getElementsByTagName('input')[0];
- btn.onclick = function(){
- startMove(300);
- }
- }
- var timer = null;
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- //求出带有变化的速度
- var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
- if(oDiv.offsetLeft == iTarget){
- clearInterval(timer);
- }else{
- oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
- }
- document.title = oDiv.offsetLeft + '...' + iSpeed;
- },30);
- }
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- var iSpeed = (iTarget - oDiv.offsetLeft) / 8;
- //对正的速度向上取整,负的速度向下取整
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(oDiv.offsetLeft == iTarget){
- clearInterval(timer);
- }else{
- oDiv.style.left = oDiv.offsetLeft + iSpeed + 'px';
- }
- document.title = oDiv.offsetLeft + '...' + iSpeed;
- },30);
- }
1、当前值离目标值越近,速度越慢
当前值离目标值越远,速度越快
speed = (目标值-当前值)/10
2、与目标点相差一点,需要进行判断
目标值>当前值,需要对速度向上取整,即speed = Math.ceil(speed)
目标值<当前值,需要对速度向下取整,即speed = Math.floor(speed)
3、如果当前值=目标值,清除动画
完整缓冲运动demo
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>缓冲运动</title>
- <style>
- #div1 {width:100px; height:100px; background:red; position:absolute; left:600px; top:50px;}
- #div2 {width:1px; height:300px; background:black; position:absolute; left:300px; top:0;}
- </style>
- <script>
- window.onload = function(){
- var oBtn = document.getElementById('btn1');
- var oDiv = document.getElementById('div1');
- var timer = null;
- oBtn.onclick = function(){
- startMove(300);
- };
- function startMove(iTarget){
- var oDiv = document.getElementById('div1');
- clearInterval(timer);
- timer = setInterval(function(){
- var speed = (iTarget - oDiv.offsetLeft)/10;
- // 但凡用到缓冲运动,一定要用到向上/向下取整!
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- oDiv.style.left = oDiv.offsetLeft + speed + 'px';
- document.title=oDiv.offsetLeft+','+speed;
- },30);
- }
- };
- </script>
- </head>
- <body>
- <input id="btn1" type="button" value="缓冲运动到300" />
- <div id="div1"></div>
- <div id="div2"></div>
- </body>
- </html>
下一步,就是处理多物体运动,运动函数里面每次都要选取一个元素加事件。如果需要对多个物体进行同样的运动, 需要将运动对象作为参数传进来。
- window.onload = function(){
- var aDiv = document.getElementsByTagName('div');
- for(var i=0;i<aDiv.length;i++){
- aDiv[i].onmouseover = function(){
- startMove(this,300);
- }
- aDiv[i].onmouseout = function(){
- startMove(this,100);
- }
- }
- }
- var timer = null;
- function startMove(obj,iTarget){
- clearInterval(timer);
- timer = setInterval(function(){
- var iSpeed = (iTarget - obj.offsetWidth) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(obj.offsetWidth == iTarget){
- clearInterval(timer);
- }else{
- obj.style.width = obj.offsetWidth + iSpeed + 'px';
- }
- },30)
- }
- window.onload = function(){
- var aDiv = document.getElementsByTagName('div');
- for(var i=0;i<aDiv.length;i++){
- aDiv[i].onmouseover = function(){
- startMove(this,300);
- }
- aDiv[i].onmouseout = function(){
- startMove(this,100);
- }
- }
- }
- function startMove(obj,iTarget){
- //将定时器,变成物体的属性,类似给物体添加索引
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var iSpeed = (iTarget - obj.offsetWidth) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(obj.offsetWidth == iTarget){
- clearInterval(obj.timer);
- }else{
- obj.style.width = obj.offsetWidth + iSpeed + 'px';
- }
- },30)
- }
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>多物体运动——改变物体宽度</title>
- <style>
- div {width:100px; height:50px; background:red; margin:10px; border:10px solid black;}
- </style>
- <script>
- window.onload = function(){
- var aDiv = document.getElementsByTagName('div');
- for( var i = 0; i < aDiv.length; i++){
- aDiv[i].timer = null;
- aDiv[i].onmouseover = function(){
- startMove(this,400);
- };
- aDiv[i].onmouseout = function(){
- startMove(this,100);
- };
- }
- function startMove(obj,iTarget){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var speed = (iTarget - obj.offsetWidth)/6;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if( obj.offsetWidth == iTarget){
- clearInterval(obj.timer);
- }else{
- obj.style.width = obj.offsetWidth + speed + 'px';
- }
- },30);
- };
- };
- </script>
- </head>
- <body>
- <div></div>
- <div></div>
- <div></div>
- </body>
- </html>
多物体运动透明度demo
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>多物体运动——改变物体透明度</title>
- <style>
- div {width:100px; height:50px; background:red; margin:10px; border:10px solid black; filter:alpha(opacity:30); opacity: .3;}
- </style>
- <script>
- window.onload = function(){
- var aDiv = document.getElementsByTagName('div');
- for( var i = 0; i < aDiv.length; i++){
- aDiv[i].timer = null;
- aDiv[i].alpha = 30;
- aDiv[i].onmouseover = function(){
- startMove(this,100);
- };
- aDiv[i].onmouseout = function(){
- startMove(this,30);
- };
- }
- function startMove(obj,iTarget){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var speed = (iTarget - obj.alpha)/6;
- speed = speed > 0 ? Math.ceil(speed) : Math.floor(speed);
- if( obj.alpha == iTarget){
- clearInterval(obj.timer);
- }else{
- obj.alpha += speed;
- obj.style.filter = 'alpha(opacity:'+obj.alpha+')';
- obj.style.opacity = obj.alpha / 100;
- }
- },30);
- };
- };
- </script>
- </head>
- <body>
- <div></div>
- <div></div>
- <div></div>
- </body>
- </html>
offsetWidth 或者 offsetHeight 等位置属性,一旦给他们加上 border。则会有诡异的现象出现。
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- setInterval(function(){
- oDiv.style.width = oDiv.offsetWidth - 1 + "px";
- },30)
- }
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- setInterval(function(){
- oDiv.style.width = parseInt(getStyle(oDiv,'width')) - 1 + 'px';
- },30)
- }
- function getStyle(obj,attr){
- if(obj.currentStyle){
- return obj.currentStyle[attr];
- }else{
- return getComputedStyle(obj,false)[attr];
- }
- }
任意值运动demo
- <!DOCTYPE HTML>
- <html>
- <head>
- <meta charset="utf-8">
- <title>JS任意值运动</title>
- <style>
- div {width:100px; height:100px; margin:20px; float:left; background: #ccc; border:10px solid black; font-size:14px;}
- </style>
- <script>
- window.onload=function ()
- {
- var oDiv1=document.getElementById('div1');
- oDiv1.onmouseover=function (){startMove(this, 'height', 400);};
- oDiv1.onmouseout=function (){startMove(this, 'height', 200);};
- var oDiv2=document.getElementById('div2');
- oDiv2.onmouseover=function (){startMove(this, 'width', 400);};
- oDiv2.onmouseout=function (){startMove(this, 'width', 200);};
- var oDiv3=document.getElementById('div3');
- oDiv3.onmouseover=function (){startMove(this, 'fontSize', 30);};
- oDiv3.onmouseout=function (){startMove(this, 'fontSize', 14);};
- var oDiv4=document.getElementById('div4');
- oDiv4.onmouseover=function (){startMove(this, 'borderWidth', 100);};
- oDiv4.onmouseout=function (){startMove(this, 'borderWidth', 10);};
- };
- function getStyle(obj, name)
- {
- return obj.currentStyle ? obj.currentStyle[name] : getComputedStyle( obj ,false )[name];
- }
- function startMove(obj, attr, iTarget)
- {
- clearInterval(obj.timer);
- obj.timer=setInterval(function (){
- var cur=parseInt(getStyle(obj, attr));
- var speed=(iTarget-cur)/6;
- speed=speed>0?Math.ceil(speed):Math.floor(speed);
- if(cur==iTarget)
- {
- clearInterval(obj.timer);
- }
- else
- {
- obj.style[attr]=cur+speed+'px';
- }
- }, 30);
- }
- </script>
- </head>
- <body>
- <div id="div1">变高</div>
- <div id="div2">变宽</div>
- <div id="div3">safasfasd</div>
- <div id="div4"></div>
- </body>
- </html>
任意值完美版demo
上述版本,还不能处理透明度的任意值,因此需要增加额外的兼容hack。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS任意值运动完美版</title>
- <style>
- #div1{ width: 100px; height: 100px; background: green; position: absolute; filter:alpha(opacity:30); opacity: .3;}
- #div2{ width: 100px; height: 100px; background: green; position: absolute; top: 120px;}
- </style>
- <script>
- window.onload = function(){
- var aDiv = document.getElementsByTagName('div');
- aDiv[0].onmouseover = function(){
- startMove(this,'opacity',100);
- }
- aDiv[0].onmouseout = function(){
- startMove(this,'opacity',30);
- }
- aDiv[1].onmouseover = function(){
- startMove(this,'width','200');
- }
- aDiv[1].onmouseout = function(){
- startMove(this,'width','100');
- }
- }
- function getStyle(obj, attr){
- if(obj.currentStyle) {
- return obj.currentStyle[attr];
- }else{
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj,attr,iTarget){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var iCur = 0;
- if(attr == 'opacity'){
- iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
- }else{
- iCur = parseInt(getStyle(obj,attr));
- }
- var iSpeed = (iTarget - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(iCur == iTarget){
- clearInterval(obj.timer);
- }else{
- if(attr=='opacity'){
- iCur += iSpeed
- obj.style.filter='alpha(opacity:' + iCur + ')';
- obj.style.opacity=iCur / 100;
- }
- else{
- obj.style[attr]=iCur+iSpeed+'px';
- }
- document.title = obj.style[attr];
- }
- },30)
- }
- </script>
- </head>
- <body>
- <div id="div1"></div>
- <div id="div2"></div>
- </body>
- </html>
链式运动demo
我们的运动框架到目前为止,基本功能都能实现了。现在拓展。所谓链式运动,即运动接着运动。当运动停止的时候,如果回调一个函数。回调一个运动函数,就能出现这样的效果。因此传入一个函数作为回调函数。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS运动——链式运动</title>
- <style>
- #div1{ width: 100px; height: 100px; background: green; position: absolute; filter:alpha(opacity:30); opacity: .3;}
- </style>
- <script>
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- oDiv.onclick = function(){
- startMove(this,'width',300,function(){
- startMove(oDiv,'height',300,function(){
- startMove(oDiv,'opacity',100)
- })
- })
- }
- }
- function getStyle(obj,attr){
- if(obj.currentStyle){
- return obj.currentStyleattr[attr];
- }else{
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj,attr,iTarget,fn){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var iCur = 0;
- if(attr == 'opacity'){
- iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
- }else{
- iCur = parseInt(getStyle(obj,attr));
- }
- var iSpeed = (iTarget - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(iCur == iTarget){
- clearInterval(obj.timer);
- //回调函数
- if(fn) fn();
- }else{
- if(attr=='opacity'){
- iCur += iSpeed
- obj.style.filter='alpha(opacity:' + iCur + ')';
- obj.style.opacity=iCur / 100;
- }
- else{
- obj.style[attr]=iCur+iSpeed+'px';
- }
- document.title = obj.style[attr];
- }
- },30)
- }
- </script>
- </head>
- <body>
- <h4>点击下面的方块试试链式运动的效果</h4>
- <div id="div1"></div>
- </body>
- </html>
同时运动demo
目前为止,我们的运动框架还有个小缺点,就是不能同时该两个属性进行运动,比如同时更改宽和高。这个要求传入的属性是不同的几个值。则考虑传入一个 json用来保存需要更改的属性。
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS运动——同时运动(有bug)</title>
- <style>
- #div1{ width: 100px; height: 100px; background: green; position: absolute;}
- </style>
- <script>
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- oDiv.onclick = function(){
- startMove(this,{'width':200,'height':500});
- }
- }
- function getStyle(obj, attr){
- if(obj.currentStyle) {
- return obj.currentStyle[attr];
- }else{
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj,json,fn){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- // 循环json
- for(var attr in json){
- var iCur = 0;
- if(attr == 'opacity'){
- iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
- }else{
- iCur = parseInt(getStyle(obj,attr));
- }
- var iSpeed = (json[attr] - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- if(iCur == json[attr]){
- clearInterval(obj.timer);
- if(fn) fn();
- }else{
- if(attr=='opacity'){
- iCur += iSpeed
- obj.style.filter='alpha(opacity:' + iCur + ')';
- obj.style.opacity=iCur / 100;
- }
- else{
- obj.style[attr]=iCur+iSpeed+'px';
- }
- document.title = obj.style[attr];
- }
- }
- },30)
- }
- </script>
- </head>
- <body>
- <h4>点击下面的方块试试同时运动效果</h4>
- <div id="div1"></div>
- </body>
- </html>
同时运动完美版
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <title>JS运动——同时运动完美版</title>
- <style>
- #div1{ width: 100px; height: 100px; background: green; position: absolute; filter:alpha(opacity:30); opacity: .3;}
- </style>
- <script>
- window.onload = function(){
- var oDiv = document.getElementById('div1');
- oDiv.onclick = function(){
- startMove(this,{'width':200,'height':200,'opacity':100});
- }
- }
- function getStyle(obj, attr){
- if(obj.currentStyle) {
- return obj.currentStyle[attr];
- }else{
- return getComputedStyle(obj, false)[attr];
- }
- }
- function startMove(obj,json,fn){
- clearInterval(obj.timer);
- obj.timer = setInterval(function(){
- var bStop = true;
- for(var attr in json){
- //取当前值
- var iCur = 0;
- if(attr == 'opacity'){
- iCur = parseInt(parseFloat(getStyle(obj, attr))*100);
- }else{
- iCur = parseInt(getStyle(obj,attr));
- }
- //计算速度
- var iSpeed = (json[attr] - iCur) / 8;
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed);
- //检测停止
- if(iCur != json[attr]){
- bStop = false;
- }
- if(attr=='opacity'){
- iCur += iSpeed
- obj.style.filter='alpha(opacity:' + iCur + ')';
- obj.style.opacity=iCur / 100;
- }
- else{
- obj.style[attr]=iCur+iSpeed+'px';
- }
- }
- if(bStop){
- clearInterval(obj.timer);
- if(fn) fn();
- }
- },30)
- }
- </script>
- </head>
- <body>
- <h4>点击下面的方块试试同时运动效果</h4>
- <div id="div1"></div>
- </body>
- </html>
最后附上完美运动框架,封装成 move.js 就可以调用了。
- /**
- * getStyle 获取样式
- * startMove 运动主程序
- */
- function getStyle(obj, attr){
- if(obj.currentStyle) {
- return obj.currentStyle[attr]; //for ie
- }else{
- return getComputedStyle(obj, false)[attr]; // for ff
- }
- }
- function Move(obj,json,fn){
- //停止上一次定时器
- clearInterval(obj.timer); //关闭前一个定时器,解决对同个对象同时调用多个Move()时,定时器叠加问题。使用obj.timer给每个调用Move()的对象赋予各自的定时器,防止多个对象同时调用Move()时,同用一个定时器,而导致相关干扰问题。
- //保存每一个物体运动的定时器
- obj.timer = setInterval(function(){
- //判断同时运动标志
- var bStop = true;
- for(var attr in json){
- //取当前值
- var iCur = 0; //创建一个变量,用于存储 attr属性每时每刻的值
- if(attr == 'opacity'){
- //针对在FF中opacity属性值为浮点数值问题,将属性值 四舍五入、转换成浮点型。乘以100,使opacity属性值与IE统一为百分数
- iCur = Math.round(parseFloat(getStyle(obj, attr))*100);
- }else{
- iCur = parseInt(getStyle(obj,attr)); //将除opacity外的属性(width/fontSize/MarginLeft等)的初始值 转换为整型
- }
- //计算速度
- var iSpeed = (json[attr] - iCur) / 8; //创建 递减的速度speed变量。实现属性值的变速改变
- iSpeed = iSpeed > 0 ? Math.ceil(iSpeed) : Math.floor(iSpeed); //取整,解决浏览器忽略小于1px的数值 导致运动结束时,离目标值Itarget少几个像素的问题
- //检测同时到达标志
- if(iCur != json[attr]){
- bStop = false;
- }
- //更改属性,获取动画效果
- if(attr=='opacity'){
- iCur += iSpeed
- obj.style.filter='alpha(opacity:' + iCur + ')';
- obj.style.opacity=iCur / 100;
- }
- else{
- obj.style[attr]=iCur+iSpeed+'px';
- }
- }
- //检测停止
- if(bStop){
- clearInterval(obj.timer);
- if(fn) fn();
- }
- },30)
- }