js入门学习~ 运动应用小例

js入门学习~ 运动应用小例

要实现的效果如下:

鼠标移入各个小方块,实现对应的效果(变宽,变高,移入透明,移出恢复)~~

(且各运动相互之前不干扰)  主要是练习多个物体的运动框架~~

----------------------------------------------------js代码如下 -----------------------------------------------------

//执行函数
window.onload = function(){
  //声明控制变量
  var aDiv = document.getElementsByTagName('div');

  //遍历
  for(var i=0;i<aDiv.length;i++){
    //添加自定义属性
    aDiv[i].timer = null;

    //添加事件(由于每个具体事件是不同的,所以单独来控制)
    aDiv[0].onmouseover = function(){
      moveStart(this,'width',400);
    }
    aDiv[0].onmouseout = function(){
      moveStart(this,'width',200);
    }

    aDiv[1].onmouseover = function(){
      moveStart(this,'height',400);
    }
    aDiv[1].onmouseout = function(){
      moveStart(this,'height',200);
    }

    aDiv[2].onmouseover = function(){
      moveStart(this,'opacity',100);
    }
    aDiv[2].onmouseout = function(){
      moveStart(this,'opacity',30);
    }
  }
}

//getStyle  获取对象的全局style属性

function getStyle(obj,name){
  if(obj.currentStyle){
    return obj.currentStyle;
  }
  else{
    return getComputedStyle(obj,false)[name];
  }
}

//moveStart  运动函数

function moveStart(obj,attribute,iTarget){
  //多个物体运动框架
  clearInterval(obj.timer);
  obj.timer = setInterval(function(){
  //声明
    var current = 0;
    if(attribute == 'opacity'){
      current = parseFloat(getStyle(obj,attribute))*100;
    }
    else{
      current = parseInt(getStyle(obj,attribute));
    }
    //缓冲速度
    var speed = (iTarget - current )/4;
    //上下取整
    speed = speed>0? Math.ceil(speed):Math.floor(speed);

    //静
    if(iTarget == current){
      clearInterval(obj.timer);
    }
    else{
      if(attribute == 'opacity'){
        obj.style.filter = 'alpha(opacity:'+(current+speed)+')';
        obj.style.opacity = (current + speed)/100;
      }
      else{
        obj.style[attribute] = current+speed+'px';
      }
    }

  },30);
}

---------------------------------------------------------------------------------

js的学习也有大半月了,进度还是很缓慢~~ 慢慢来了,还是基本功,编程基础不扎实, 慢慢来了~~

在原有学习计划上, 减少点打酱油时间, 多点看书事件,把js基础先补补~~

上一篇:C Primer Plus 第4章 字符串和格式化输入/输出 编程练习


下一篇:自己封装的android客户端http网络框架