Javascript-moving image

它是如何將一幅圖像從一個位置移動到另一個位置的？我甲肝這樣的功能Javascript-moving image

隱蔽：

function SetOpacity(object,opacityPct) 
{ 
    // IE. 
    object.style.filter = 'alpha(opacity=' + opacityPct + ')'; 
    // Old mozilla and firefox 
    object.style.MozOpacity = opacityPct/100; 
    // Everything else. 
    object.style.opacity = opacityPct/100; 
} 
function ChangeOpacity(id,msDuration,msStart,fromO,toO) 
{ 
    var element=document.getElementById(id); 
    var opacity = element.style.opacity * 100; 
    var msNow = (new Date()).getTime(); 
    opacity = fromO + (toO - fromO) * (msNow - msStart)/msDuration; 
    if (opacity<0) 
    SetOpacity(element,0) 
    else if (opacity>100) 
    SetOpacity(element,100) 
    else 
    { 
    SetOpacity(element,opacity); 
    element.timer = window.setTimeout("ChangeOpacity('" + id + "'," + msDuration + "," + msStart + "," + fromO + "," + toO + ")",1); 
    } 
} 

function FadeOut(id) 
{ 
    var element=document.getElementById(id); 
    if (element.timer) window.clearTimeout(element.timer); 
    var startMS = (new Date()).getTime(); 
    element.timer = window.setTimeout("ChangeOpacity('" + id + "',500," + startMS + ",100,0)",1); 
}

用於獲取當前位置或下一個位置（由圖像的ID和DIV的ID）

function findPos(e){ 
var obj = document.getElementById(e); 
var posX = obj.offsetLeft;var posY = obj.offsetTop; 
while(obj.offsetParent){ 
posX=posX+obj.offsetParent.offsetLeft; 
posY=posY+obj.offsetParent.offsetTop; 
if(obj==document.getElementsByTagName('body')[0]){break} 
else{obj=obj.offsetParent;} 
} 
alert(posX+'-'+posY); 
}

所述第一位置是圖像的位置，然後 - 是div的位置

來源

2010-11-02 Andriy K.

最簡單的方法是使用jQuery並使用動畫函數mate。

例：

$(".block").animate({"left": "+=50px"}, "slow");

如你所願動態變化的數值您可以使用像背景顏色，透明度等方面的括號多個參數。

一個供大家參考鏈接位於：

來源

2010-11-02 23:07:22 ninu

大多數JavaScript動畫依靠計時器創建流體運動的影響。要在整個頁面上滑動圖片，您需要設置一個時間間隔，以便每5毫秒將css位置更改爲右側1px或類似的東西。 Javascript animation tutorial.

但是，動畫最容易用像jquery這樣的庫完成或者many others.

來源

2010-11-02 23:11:43

Javascript-moving image

回答

相關問題