我的问题:
通过 JavaScript 更改 margin-top 属性objectName.style.marginTop = value;
在 Chrome 和 Safari 中效果很好,但是在 Firefox 中,定位似乎全错了。Firefox 没有将元素放置在视口上,然后将其降低到略低于所需位置,然后将其向上移动一点,而是将其放置在最终位置的下方,上下移动,几乎反映了所需的动画。
如果我切换Javascript并在CSS中输入值,定位就可以了,所以我猜错误在于.js。
背景:
我正在尝试通过 JavaScript 创建一个简单的动画徽标。我希望它从浏览器视口外部下降到它的位置。徽标是 HTML 元素 <img id="site_logo" src="logo.png" />
下面是 JavaScript 代码:
var logoValue = -400;
function onLoad(){
// ...
logoStarter();
}
function logoStarter(){ //sets the logo in its starting position outside the viewport
var site_logo = document.getElementById("site_logo");
site_logo.style.marginTop = logoValue +"px";
logoAnimationDown();
}
function logoAnimationDown(){ // moves the logo down until it is somewhat underneath its final position
if(logoValue <= 20){
console.log(logoValue);
logoValue += 17;
var site_logo = document.getElementById("site_logo");
site_logo.style.marginTop = logoValue +"px";
setTimeout('logoAnimationDown()', 30);
}
else{
setTimeout('logoAnimationUp()', 30);
}
}
function logoAnimationUp(){ // moves the logo up to its final position
if(logoValue > 0){
console.log(logoValue);
logoValue -= 10;
var site_logo = document.getElementById("site_logo");
site_logo.style.marginTop = logoValue + "px";
setTimeout('logoAnimationUp()', 30);
}
}