1

我正在寻找一种解决方案来使 CD 图像自行转动（就像这样：http ://alanschaffer.com/sound/images/cd.gif ）并且每当从该 CD 下的列表中选择曲目并单击时, 将播放所选曲目。在播放曲目时单击 CD 时，曲目将停止。

你能帮我吗？

PS：任何适用于 iPad 的解决方案建议都会被采纳。我将在 iPad 应用程序上使用它。

4

3 回答 3

3

我建议使用css-animations进行图像旋转（当然你必须为其他浏览器添加前缀）：

.mycd.animate {
  -webkit-animation: infinite-spinning 1s infinite linear;
}

@-webkit-keyframes infinite-spinning {
  from {
    -webkit-transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
  }
}

只需将animate类添加到您的图像中，cd 就会旋转。

$('.mycd').on('click',function() {
  if($(this).hasClass('animate')) {
    // Track is playing -> stop it
    $(this).removeClass('animate');
  } else {
    // Not Playing -> start
    $(this).addClass('animate');
  }
});
于 2012-09-04T09:18:13.807 回答
0

您无法控制图像的动画。您将需要每个图像的两个版本，一个是动画的，一个不是。单击后，您可以轻松地从一个图像更改为另一个图像。

例子：

$('#imgId').on("click", function(){
    var src = $(this).attr('src');  
    $(this).attr('src', src.replace('.gif', '_anim.gif'));    

    //logic for stopping and playing music - see link below
});

当然，在上面的代码示例中，如果之前的图像处于“动画”状态，您将需要添加替换正确图像的逻辑。

对于操纵“音乐” ，请查看 SO 上的此链接是否有帮助。

于 2012-09-04T09:16:24.277 回答
0

您可能想使用transform: rotate(xdg);.

这是另一个旋转图像的示例。

于 2012-09-04T09:18:14.493 回答