快捷導(dǎo)航

JavaScript 創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)代碼

更新時(shí)間：2013年05月08日 17:38:21 作者：

本篇文章是對(duì)，在JavaScript中創(chuàng)建運(yùn)動(dòng)框架的實(shí)現(xiàn)方法進(jìn)行了介紹。需要的朋友參考下

封裝好的運(yùn)動(dòng)框架Move(obj,attr,iTarget),可直接調(diào)用：

可用于設(shè)置width、border、fontSize、marginLeft、opacity等許多常見(jiàn)屬性值的變速變化，實(shí)現(xiàn)各種有趣效果。

兼容IE和FF。

/****************
    *
    *   IE-BUG:
    *   在IE中，設(shè)置opacity屬性時(shí)，元素樣式中需要設(shè)置opacity屬性，才能讀取到opacity值。
    *
    *   obj：元素對(duì)象。   attr：用引號(hào)包圍的屬性名。   iTarget：屬性目標(biāo)值。
    *
    *****************/

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

speed=speed>0?Math.ceil(speed):Math.floor(speed);//取整，解決瀏覽器忽略小于1px的數(shù)值導(dǎo)致運(yùn)動(dòng)結(jié)束時(shí)，離目標(biāo)值Itarget少幾個(gè)像素的問(wèn)題

            if(iTarget==cur){//當(dāng)目標(biāo)值等于目標(biāo)值時(shí)，結(jié)束定時(shí)器
                clearInterval(obj.timer);
            }else{
                    cur+=speed;//當(dāng)前值cur 加上遞減的速度值speed
                if(attr=="opacity"){
                    // 分別對(duì)IE和FF設(shè)置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()函數(shù) 用于兼容IE和FF：獲取對(duì)象的非行間樣式中的屬性的值。 obj：元素對(duì)象。 name：屬性名。
    function getStyle(obj,name){
        if(obj.currentStyle){
            return obj.currentStyle[name];//for IE
        }else{
            return getComputedStyle(obj,false)[name];//for FF
        }
    }