@-webkit-keyframes rotate { 0%, 100% { -webkit-transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); } } @-moz-keyframes rotate { 0%, 100% { -moz-transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); } } @-o-keyframes rotate { 0%, 100% { -o-transform: rotate(0deg); } 100% { -o-transform: rotate(360deg); } } @-ms-keyframes rotate { 0%, 100% { -ms-transform: rotate(0deg); } 100% { -ms-transform: rotate(360deg); } } @keyframes rotate { 0%, 100% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
#play_btn
.
playing
{
-moz-animation: rotate 4s linear infinite; -webkit-animation: rotate 4s linear infinite; -o-animation: rotate 4s linear infinite; -ms-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite; }
var audio = document.createElement("audio"); document.body.appendChild(audio); var playing = 1;
$(function(){
audio.src = "{$images[1].body}"; audio.load(); audio.play(); $('#play_btn').click(function(){ if(playing ==1){ $('#play_btn').removeClass('playing'); audio.pause(); playing = 0; }else { $('#play_btn').addClass('playing'); audio.play(); playing = 1; } })
})