JS StartMove源碼-簡單運動框架

這幾天學習js運動應用課程時,開始接觸一個小例子:「仿Flash的圖片輪換播放器」,其中使用的StartMove簡單運動框架我以爲挺好用的。這個源碼也簡單,理解其原理,本身敲即使也就熟悉了。瀏覽器

用的時候,將下列代碼放在一個js文件,如move.js。而後使用的時候引入該文件。如<script src="move.js"></script>框架

function getStyle(obj,name){     //獲取對象的樣式
    if(obj.currentStyle){        //考慮瀏覽器問題,採用if判斷獲取當前對象的樣式
        return obj.currentStyle[name];
        }else{
        return getComputedStyle(obj,false)[name];
        }
    }
    
function startMove(obj,attr,Target){
    clearInterval(obj.timer);
    obj.timer = setInterval(function(){
        var cur = 0;
        
        if(attr=='opacity')
        {
        //像素自己是小數類型的,因此用Math.round取整,這裏乘100,下面使用這個參數的時候會進行除100.
        cur = Math.round(parseFloat(getStyle(obj,attr))*100);
        }
        else
        {
        cur = parseInt(getStyle(obj,attr));
        }
        var spped = (Target-cur)/6;
        speed = speed>0?Math.ceil(speed):Math.floor(speed);
        if(Target==cur)
        {
        clearInterval(obj.timer);
        }
        else
        {
        //由於obj.style[attr]=cur+speed+'px';語句不適用opacity,因此要判斷
        if(attr=='opacity')  
        {
            obj.style.filter='alpha(opacity:'+(cur+speed)+')'; //IE兼容
            obj.style.opacity=(cur+speed)/100;  //火狐兼容
        }
        else
        {
        obj.style[attr]=cur+speed+'px';    
        }
        }
        },30
    
    );

    }
相關文章
相關標籤/搜索