How do I make it when the music starts to rotate an image?

Asked

Viewed 490 times

1

How do I when the music starts to rotate an image? javascript or php 

<script type="text/javascript">
rodarImagem(
function adicionaClassERoda() {
    document.getElementById('pic').className = 'rodar';
});
</script>
<style>
.rodar {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {-webkit-transform: rotate(0deg);}
    to   {-webkit-transform: rotate(359deg);}
}
</style>

<div class="jp-controls">
    <img id="pic" src="img/cd1.jpg" style="width:100px; height:100px; position:absolute;"> <a href="#"><div class="jp-play" onclick="rodarImagem();" role="button" tabindex="0"><i class="fa fa-play-circle"></i></div></a>

    <div class="jp-previous" role="button" tabindex="0"><i class="fa fa-chevron-left"></i>
    </div>
    <div class="jp-stop" onclick="pararImagem();" role="button" tabindex="0"><i class="fa fa-stop"></i>
    </div>
    <div class="jp-next" role="button" tabindex="0"><i class="fa fa-chevron-right"></i>
    </div>
</div>
javascript jquery image
  • 1

    What song? Running do you mean rotating? Do you want the solution in PHP or Javascript? And why did you tag Java? It is very difficult to understand what you want, please edit the question, add some code related to your question. Help us to help you.

  • For dear I’m making a music site and I would like to know how to do when the music starts playing, an image start to rotate (rotate) continuously until the music stops? javascript

  • 1

    How is the music playing on the page? With HTML5, Flash, Silverlight? Know how to capture the music play/pause events?

  • i am using jplayer plugin that needs jquery and it is already working correctly I just want to implement this function to rotate image continuously until the music stops, forgive me if I am not making things clear, and I am new in the field of javascript pest

  • I added the other solution :)

  • 2

    Solved your problem?

Show 1 more comment

1 answer

1

Using library extension rotate jquery

var angulo = 1;
var rodar = function() {
    setInterval(function() {
        $("#pic").rotate(angulo);
    }, 100);
};
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://jquery-rotate.googlecode.com/files/jquery.rotate.1-1.js"></script>

<input type="button" id="btn" value="Rodar!" onclick="rodar();" />
<br/>
<img id="pic" src="http://precollegiate.stanford.edu/circle/math/12circles.png" />

-

-

Solution with CSS 3 and pure javascript:

function adicionaClassERoda() {
    document.getElementById('pic').className = 'rodar';
}
.rodar {
    animation: rotation 2s infinite linear;
}

@keyframes rotation {
    from {transform: rotate(0deg);}
    to   {transform: rotate(359deg);}
}
<input type="button" value="Rodar!" onclick="adicionaClassERoda()"/>
<br/>
<img id="pic" src="http://precollegiate.stanford.edu/circle/math/12circles.png">

  • very good guy, but I have one more question, has to let the picture spinning more without moving on the page?

  • @Matheus put another solution with CSS 3 that works the way you want it to

  • Because the guy very sheltered by the help, only one more question has how I implement it in my music player? like when the music starts to play the picture starts to spin and when the music stops the picture stops to spin too

  • @Music only plays when the play is tight? <a href="#" class="jp-play">Play</a> for example?

  • <a href="#" class="jp-play" onclick="rodarImagem();">Play</a> <a href="#" class="jp-play" onclick="pararImagem();">Stop</a> and in the function you add and remove the classname respectively

  • yes yes more for the image to stop spinning when the music automatically stops playing or when the music pauses?

  • Thank you so much for your help

  • I will test now on my website

  • If the solution solved your problem, mark as the right answer by doing favor to facilitate subsequent visits.

  • my button to fire the function this way(<a href="#"><div class="jp-play" onclick="rodarImagem();" role="button" tabindex="0"><i class="fa fa-play-Circle"></i></div></a>) and the javascript and css like this (<script type="text/javascript"> rodarImagem( Function additionClassERoda() { Document.getElementById('pic'). classname = 'run'; }); </script> <style> . rotate { Animation: rotation 2s linear Infinite; } @keyframes rotation { from {-Webkit-Transform: Rotate(0deg);} to {-Webkit-Transform: Rotate(359deg);} }</style>)

  • did not work

  • @But put the codes in your question to make it easier

  • @But by what I see is wrong your javascript

  • Pow man I’m learning about javascript now

Show 9 more comments

Browser other questions tagged javascript jquery image

You are not signed in. Login or sign up in order to post.