0

我有一个用 css3 动画制作的幻灯片,如下所示:

@-keyframes animBanner
{
0% {top: 0px;}
18% {top: 0px;}
20% {top: -60px;}
38% {top: -60px;}
40% {top: -120px;}
58% {top: -120px;}
60% {top: -180px;}
78% {top: -180px;}
80% {top: -240px;}
98% {top: -240px;}
100% {top: 0px;}
}

我想给它添加控件,所以你可以去你想要的图片。

我可以使用这样的简单 javascript 触发转换事件:

var p=document.getElementById('elemId');
p.style.left= '50%';

但它不适用于动画。是否有可能完成这项工作,或者我应该使用 jquery 来制作动画?

4

1 回答 1

1

施密蒂是对的。

我使用以下代码更改了类:

//Stop animation
var ad = document.getElementById('animBannerId');
ad.className="paused";
//Move the slide to the desired pic
anuncio.style.top = '160px';
//Etc.

我的CSS有这个转换代码:

.paused
{
position: relative;
transition:top 1s;
-o-transition:top 1s;
-webkit-transition:top 1s;
-moz-transition:top 1s;
}

你们,伙计们,太棒了。非常感谢你。

顺便说一句,我还没有添加重新启动动画的代码,但是可以通过制作计时器来完成

于 2012-11-09T18:53:21.573 回答