私はCD画像を自分自身で回転させる解決策を探しています(ちょうどこのように:http://alanschaffer.com/sound/images/cd.gif)そしてそのCDの下のリストからトラックが選択されてクリックされるたびに、選択したトラックが再生されます。トラックの再生中にCDをクリックすると、トラックが停止します。
手伝ってくれますか?
PS:iPadで動作するソリューションの推奨事項が適用されます。これをiPadアプリで使用します。
私はCD画像を自分自身で回転させる解決策を探しています(ちょうどこのように:http://alanschaffer.com/sound/images/cd.gif)そしてそのCDの下のリストからトラックが選択されてクリックされるたびに、選択したトラックが再生されます。トラックの再生中にCDをクリックすると、トラックが停止します。
手伝ってくれますか?
PS:iPadで動作するソリューションの推奨事項が適用されます。これをiPadアプリで使用します。
画像の回転には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');
}
});
画像のアニメーションを制御することはできません。各画像には2つのバージョンが必要です。1つはアニメーション化されたもので、もう1つはそうではありません。クリックすると、ある画像から別の画像に簡単に変更できます。
例:
$('#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のこのリンクが役立つかどうかを確認してください。
を使用することをお勧めしますtransform: rotate(xdg);
。
これは、画像を回転させる別の例です。