JavaScript——創建運動框架

封裝好的運動框架Move(obj,attr,iTarget),可直接調用：

可用於設置width、border、fontSize、marginLeft、opacity等許多常見屬性值的變速變化，實現各種有趣效果。

兼容IE和FF。

/****************
    *
    *   IE-BUG:
    *   在IE中，設置opacity屬性時，元素樣式中需要設置opacity屬性，才能讀取到opacity值。
    *
    *   obj：元素對象。   attr：用引號包圍的屬性名。   iTarget：屬性目標值。
    *
    *****************/


    function Move(obj,attr,iTarget){
        clearInterval(obj.timer);//關閉前一個定時器，解決對同個對象同時調用多個Move()時，定時器疊加問題。使用obj.timer給每個調用Move()的對象賦予各自的定時器，防止多個對象同時調用Move()時，同用一個定時器，而導致相關干擾問題。
        obj.timer=setInterval(function(){
            var cur=0;//創建一個變量，用於存儲 attr屬性每時每刻的值
            if(attr=="opacity"){
            //針對在FF中opacity屬性值為浮點數值問題，將屬性值 四舍五入、轉換成浮點型。乘以100，使opacity屬性值與IE統一為百分數
                cur=Math.round(parseFloat(getStyle(obj,attr))*100);
            }else{
                cur=parseInt(getStyle(obj,attr));//將除opacity外的屬性(width/fontSize/MarginLeft等)的初始值 轉換為整型
            }
            var speed=(iTarget-cur)/10;//創建 遞減的速度speed變量。實現屬性值的變速改變

            speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解決瀏覽器忽略小於1px的數值 導致運動結束時，離目標值Itarget少幾個像素的問題 if(iTarget==cur){//當目標值等於目標值時，結束定時器
                clearInterval(obj.timer);
            }else{
                    cur+=speed;//當前值cur 加上 遞減的速度值speed if(attr=="opacity"){
                    // 分別對IE和FF設置opacity屬性值
                    obj.style.filter="alpha(opacity:"+cur+")"; //for IE
                    obj.style.opacity=cur/100;   //for FF
                }else{
                    obj.style[attr]=cur+"px"; //給指定屬性attr 添加值cur+speed
                }
            }
        },30);
    }
    //getStyle()函數 用於兼容IE和FF：獲取 對象的 非行間樣式中的屬性的值。 obj：元素對象。 name：屬性名。 function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];//for IE
        }else{
            return getComputedStyle(obj,false)[name];//for FF
        }
    }

 

分享自學“智能社“的”JavaScript運動“視頻教程后的實踐成果~

推薦JS初學者去看看“智能社“推出的JS教程。