JS运动学习笔记--任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）-Web学海无涯

   DOCTYPE html  > 
   html   lang  ="en"  > 
   head  > 
       meta   charset  ="UTF-8"  > 
       title  > 任意值的运动框架     title  > 
       style  >  
        div   {  
            float  :   left  ;  
            width  :   200px  ;  
            height  :   200px  ;  
            margin  :   20px  ;  
            background-color  :   yellow  ;  
            border  :   1px solid black  ;  
            font-size  :   14px  ;  
            filter  :   alpha(opacity=30)  ;   /*  IE  */  
            opacity  :   0.3  ;   /*  火狐,chrome  */ 
         } 

       style  > 
       script  >  

        window.onload   =   function   () {
  //  Div变高 
             var   oDiv1   =   document.getElementById(  '  div1  '  );

            oDiv1.onmouseover   =   function   () {
                startMove(  this  ,   '  height  '  ,   400  );
            };
            oDiv1.onmouseout   =   function   () {
                startMove(  this  ,   '  height  '  ,   200  );
            };
  //  Div变宽 
             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  ,   '  opacity  '  ,   100  );
            };
            oDiv4.onmouseout   =   function   () {
                startMove(  this  ,   '  opacity  '  ,   30  );
            };

        };
        
  //  属性值的获取函数 
         function   getStyle(obj, name) {
              if   (obj.currentStyle) {
                  return   obj.currentStyle[name];
            }
              else   {
                  return   getComputedStyle(obj,   false  )[name];
            }
        }

  //  运动框架 
         var   timer   =   null  ;
          function   startMove(obj, attr, iTarget) {      //  obj代表对象,attr代表目标属性,iTarget代表设定的属性目标值 
             clearInterval(obj.timer);         //  每次执行函数之前清除定时器,保证每次只有一个定时器在工作 
             obj.timer   =   setInterval(  function   () {
                  var   cur   =   0  ;
                  if   (attr   ==   '  opacity  '  ) {          //  透明度属性的获取 
                     cur   =   Math.round(parseFloat(getStyle(obj, attr))   *   100  );     //  Math.round针对IE7出现小数的问题 
                 }
                  else   {
                    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   {
                      if   (attr   ==   '  opacity  '  ) {
                        obj.style.filter   =   '  alpha(opacity=  '   +   (cur   +   speed)   +   '  )  '  ;      //  IE浏览器 
                         obj.style.opacity   =   (cur   +   speed)   /   100  ;        //  火狐,chrome 
                     }
                      else   {
                        obj.style[attr]   =   cur   +   speed   +   '  px  '  ;     //  非透明度属性值 
                     }
                }
            },   30  );
        }

        script  > 
   head  > 
   body  > 
   div   id  ="div1"  > 变高   div  > 
   div   id  ="div2"  > 变宽   div  > 
   div   id  ="div3"  > I Love JavaScript!   div  > 
   div   id  ="div4"  > 修改透明度   div  > 

   body  > 
   html  >  

查看更多关于JS运动学习笔记--任意值的运动框架（高/宽度，背景颜色，文本内容，透明度等）-Web学海无涯的详细内容...