How do I play a song when I start playing an image?

Question

How do I play a song when I start playing an image?

Navigation

#1 by (1 votes)

1

How do I play a song when I start playing 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 imagem

asked by anonymous 06.06.2015 / 20:21

1 answer

Fatal error: Class 'mikehaertl \ wkhtmlto \ Pdf' not found How to remove popup when opening product details?

score 1 · Answer 1

Using JQuery % extension library of 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><scriptsrc="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"/>

-

SolutionwithCSS3andpurejavascript:

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">