Question

当我点击暂停按钮时，我有一个旋转的旋转木马它现在停止我希望当我停止它时前面的图像ID获取并移动到该ID的相关页面请帮助我这里是下面的代码：

enter code here

http://jsfiddle.net/aamir/P5295/8/

Answer 1

任何解决方案都涉及收听动画事件。可以在此处找到对此的评论：http://www.sitepoint.com/css3-animation-javascript-event-handlers/。

您只使用关键帧执行完整的360度旋转，只执行一个动画。不幸的是，Javascript没有为每个关键帧提供事件。例如，这只会警告＆＃34; hello world＆＃34;当你的 1 一路走来时：

$('#carousel').on('webkitAnimationIteration animationiteration', function(){
    alert('hello world')
});

可以在此处找到提供关键帧事件功能的库：http://www.joelambert.co.uk/cssa/，虽然他们警告说它不能在webkit-mobile中工作，但我自己也没有这方面的经验

如果您可以捕获每个部分旋转的事件，那么为了区分旋转木马中每个图形的位置，您可能最好通过使用数据属性来更改每个项目的状态。例如，您可以从这样的标记开始：

<div id="carousel">
    <figure data-on-top='true'>1</figure>
    <figure data-on-top='false'>2</figure>
    <figure data-on-top='false'>3</figure>
    <figure data-on-top='false'>4</figure>
    <figure data-on-top='false'>5</figure>
    <figure data-on-top='false'>6</figure>
    <figure data-on-top='false'>7</figure>
    <figure data-on-top='false'>8</figure>
    <figure data-on-top='false'>9</figure>
</div>

...然后在每个关键帧上，将 on-top 数字更改为下一个。然后，点击后，您可以获取一个＆＃34; on-top＆＃34;并做你需要做的事。

我怎样才能获得图像的id并在javascript中移动到该id的相关页面

1 个答案: