js 运动框架及实例

浏览数：28 / 时间：2015年06月09日

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>运动框架</title>
    <script src="move.js" type="text/javascript"></script>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById("div1");
            var oBtn = document.getElementById("btn1");
            
            oBtn.onclick = function(){
                 move(oDiv,‘right‘,300);   //可使
                 //move(oDiv,‘left‘,300);  //可使
                 //move(oDiv,‘top‘,300);   //可使
                 //move(oDiv,‘width‘,300); //可使
                 //move(oDiv,‘height‘,300); //可使
            }
            
            oDiv.onmouseover = function(){
                move(oDiv,‘opacity‘,100);
            }
            
            oDiv.onmouseout = function(){
                move(oDiv,‘opacity‘,30);
            }

        }
    </script>
</head>
<body>
  <input type="button" id="btn1" value="运动" />
   <div id="div1" style="width:200px;height:200px;position:absolute;background:red;filter:alpha(opacity=30);opacity:0.3;">
   </div>
</body>
</html>

js：

//height，left , top ,right ，opacity
var timer = null 
function move(obj,attr,target)
{
     //开启定时器
     timer = setInterval(function(){
     var current = 0;
     if(attr=="opacity")
     {
        current = Math.round(parseFloat(getStyle(obj,attr))*100);
     }
     else
     {
        current = parseInt(getStyle(obj,attr));
     }
     
    var speed = target>current ? 6 :-6;
    
    if(Math.abs(current-target)<6)
    {
        //清除定时器
        clearInterval(timer);
    }
    else
    {
         if(attr=="opacity")
         {
            obj.style.filter = "alpha(opacity:"+(current + speed) +")";
            obj.style.opacity = (current + speed) /100;
            
         }
         else
         {
            obj.style[attr] = current + speed +"px";
         }
    }
    
   },30);

}

function getStyle(obj,attr)
{
    if(obj.currentStyle)  //用于IE
    {
        return obj.currentStyle[attr];
    }
    else
    {
        //document.defaultView.getComputedStyle 该方法时DOM2中才出现的方法
        return document.defaultView.getComputedStyle(obj, null)[attr];
        //getComputedStyle DOM1中的方法
        //return getComputedStyle(obj,false)[attr];
    }
}