Question

我使用以下JavaScript动画在我的网站加载时从屏幕右侧滑入一些图片：

var step=8; var step1=16; var step2=12; var step3=6; var step4=4;
function move_img(str) {

var a=document.getElementById('i1').offsetTop; a= a +100;
document.getElementById('i1').style.top= a + "px";

var b=document.getElementById('i2').offsetTop; b= b +100;
document.getElementById('i2').style.top= b + "px";

var c=document.getElementById('i3').offsetTop; c= c +100;
document.getElementById('i3').style.top= c + "px";

var d=document.getElementById('i4').offsetTop; d= d +100;
document.getElementById('i4').style.top= d + "px";

var e=document.getElementById('i5').offsetTop; e= e +100;
document.getElementById('i5').style.top= e + "px"; }

function disp(){

var a=document.getElementById('i1').offsetLeft; var
b=document.getElementById('i2').offsetLeft; var
c=document.getElementById('i3').offsetLeft; var
d=document.getElementById('i4').offsetLeft; var
e=document.getElementById('i5').offsetLeft; if(a > 400){a= a - step;
document.getElementById('i1').style.left= a + "px"; // horizontal
movment step *=0.9948; } if(b > 200 ){b= b - step1;
document.getElementById('i2').style.left= b + "px"; // horizontal
movment step1*=0.992; }

if(c > 350 ){c = c - step2; document.getElementById('i3').style.left=
c + "px"; // horizontal movment step2*=0.993; }

if(d > 1200 ){d = d - step3; document.getElementById('i4').style.left=
d + "px"; // horizontal movment step3*=0.997; } if(e > 1350 ){e = e -
step4; document.getElementById('i5').style.left= e + "px"; //
horizontal movment step4*=0.998; } }

function timer(){ disp(); my_time=setTimeout('timer()',10);

}

虽然这在我的计算机上看起来很棒，但由于它使用像素而不是百分比，因此在不同的宽高比下看起来很糟糕。我该如何解决这个问题？

谢谢！

Answer 1

这里我准备了使用CSS3 transition的示例。这是一个有转换规则的类。在演示中，您可以看到它是如何完成的。

.animate{
    left: 0;
    width: 50px;
    -webkit-transition: all 1s;
    transition: all 1s;
}

DEMO

另一个使用CSS3 animation的案例：

DEMO - Animation

Answer 2

使尺寸相对于窗口大小进行更改。

Here's a blog with details on cross-browser ways to get window/viewport dimensions with javascript

但是如果你愿意只支持可以使用CSS3的浏览器，正如其他人所建议的那样，CSS可能是一种更清晰，更有效的方式来实现你想要的效果

如何动态制作一些基本的javascript动画？

2 个答案:

DEMO

DEMO - Animation