javascript运动框架代码

迟到了好几天，不好意思哈！
继续来优化一下javascript运动框架的代码。
之前的代码存在bug，当重复点击时速度会加快，那么怎么解决这个bug呢？

现在我们就来解决一下，
其实很简单，
在开始运动时,关闭已有计时器。

思考一下：如何让很多物体同时动，而且他们至今不会互相影响呢。
     1、单独给每个物体加一个计时器
     2、当鼠标移进去宽度增长至800，当鼠标移出时，宽度慢慢减小至原本宽度
具体代码如下：
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementsByTagName('p');
var timer;
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
 }
function move(obj,name,target,dur,fn){
clearInterval(obj.timer);
var count = parseInt(dur/30);//总次数
var start = parseFloat(getStyle(obj,name));//开始的距离
var dis = target - start;//距离
// 步长
var step = dis/count;
var n = 0;//当前步数
obj.timer = setInterval(function(){
n++;
obj.style[name] = start+ n*step +'px';
  if(n == count){
  clearInterval(obj.timer)
fn && fn();
  }

},30)
}
 for(var i=0;i<oDiv.length;i++){
  oDiv[i].onmouseover = function(){
  move(this,'width',800,1000)
  }
  oDiv[i].onmouseout = function(){
  move(this,'width',30,1000)
  }
 }
}
</script>
开始的位置和结束的位置都为随机的，用JSON来传递多个值，那要怎么写呢？
    实现思路：1、把name,target两个形参改为json
              2、然后用for in循环。遍历属性和值。

在move（）函数里，把开始位置和距离。改为用json
大致就是这样。
                                       var start = {};
var dis = {};

for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[name];
}

代码小浣熊

代码小浣熊是基于商汤大语言模型的软件智能研发助手，覆盖软件需求分析、架构设计、代码编写、软件测试等环节

51

查看详情

在运动的时候都有快慢，有运动曲线，这怎么写呢？
写一个判断条件，传一个参数easing，当满足条件时，相对应的速度快慢。
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(easing){
case 'linear':
 var cur = start[name] + a*dis[name];
 break;
case 'ease-in':
 var cur = start[name] + Math.pow(a,3)*dis[name];
 break;
case 'ease-out':
 var a = 1-n/count;
 var cur = start[name] + (1-Math.pow(a,3))*dis[name];
 break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}
当然会有默认的，有的不需要设置，默认就可以了。这就是我们的终极运动框架！！！！
window.onload = function(){
var oDiv = document.getElementsByTagName('p')[0];
               var timer;
function getStyle(obj,name){
//currentStyle:当前的样式
if(obj.currentStyle){
return obj.currentStyle[name];//不兼容谷歌和火狐
}else{
//getComputedStyle:计算过后的样式
return getComputedStyle(obj,false)[name];//不兼容IE8--
}
 }
//complete = dur,easing,fn
function move(obj,json,complete){
clearInterval(obj.timer);

var complete = complete || {};
complete.dur = complete.dur || 1000;
complete.easing = complete.easing || 'ease-out';

var count = parseInt(complete.dur/30);//总次数
var start = {};//{width:300,height:300}
var dis = {};
//{width:300,height:300}
for(var name in json){
start[name] = parseFloat(getStyle(obj,name));
dis[name] = json[name] - start[name];
}
var n = 0;//当前步数
obj.timer = setInterval(function(){
n++;
for(var name in json){
var a = n/count;
switch(complete.easing){
case 'linear':
 var cur = start[name] + a*dis[name];
 break;
case 'ease-in':
 var cur = start[name] + Math.pow(a,3)*dis[name];
 break;
case 'ease-out':
 var a = 1-n/count;
 var cur = start[name] + (1-Math.pow(a,3))*dis[name];
 break;
}



if(name == 'opacity'){
obj.style[name] = cur;
obj.style.filter = 'alpha('+cur*100+')';
}else{
obj.style[name] = cur +'px';
}
}

if(n == count){
    clearInterval(obj.timer)
  complete.fn && complete.fn();
}

},30)
}

  oDiv.onmouseover = function(){
  move(this,{width:300,height:300},{dur:3000,easing:'ease-in'})
  }
  oDiv.onmouseout = function(){
  move(this,{width:50,height:50},{dur:3000,fn:function(){
  move(oDiv,{opacity:0})
  }})
  }

}

立即学习“Java免费学习笔记（深入）”；

以上就是javascript运动框架代码的详细内容，更多请关注php中文网其它相关文章！