萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> 一個簡單的縱橫向動畫效果類

一個簡單的縱橫向動畫效果類

分享一個簡易的動畫效果類,思路源於JavaScript DOM編程藝術,這本書是我JavaScript的啟蒙書,看過四篇,至今時常翻起.我想也是每個JavaScript初學者的必備書.Mr.Think非常推崇這本書,真的很棒!
思路其實很基礎,很簡單,主要是通過setTimeout()方法,並利用CSS絕對定位來以改變圖片位置以實現動畫效果.純DOM方式編寫,兼容所有支持JavaScript的浏覽器及其他API.
動畫效果類核心JavaScript代碼:

//@Mr.Think---簡易動畫類
function moveElem(elemId,final_x,final_y,interval){
    if (!document.getElementById) return false;
    if (!document.getElementById(elemId)) return false;
    var elem=document.getElementById(elemId);
    if(elem.movement) clearTimeout(elem.movement);
    if(!elem.style.left) elem.style.left="0px";
    if(!elem.style.top) elem.style.top="0px";
    var xpos=parseInt(elem.style.left);
    var ypos=parseInt(elem.style.top);
    if(xpos==final_x&&ypos==final_y) return true;
    if(xpos<final_x){
        var divisor=Math.ceil((final_x-xpos)/10);
        xpos=xpos+divisor;
    }
    if(xpos>final_x){
         var divisor=Math.ceil((xpos-final_x)/10);
         xpos=xpos-divisor;
    }
    if(ypos<final_y){
        var divisor=Math.ceil((final_y-ypos)/10);
        ypos=ypos+divisor;
    }
    if(ypos>final_y){
        var divisor=Math.ceil((ypos-final_y)/10);
        ypos=ypos-divisor;
    }
    elem.style.left=xpos+"px";
    elem.style.top=ypos+"px";
    var repeatelem="moveElem('"+elemId+"',"+final_x+","+final_y+","+interval+")";
    elem.movement=setTimeout(repeatelem,interval);   
}

 

copyright © 萬盛學電腦網 all rights reserved