0
$(function(){

var nextAngle = 0;
var previousAngle = 0;

function getNextAngle(elem) {
    nextAngle += 90;    
    return nextAngle;
}

function getPreviousAngle(elem) {   
    previousAngle -= 90;    
    return previousAngle;
}

$(".rotRight").click(function(){
    $(this).parent().parent().parent().parent().find(".img").rotate(getNextAngle());  
});

$(".rotLeft").click(function(){
    $(this).parent().parent().parent().parent().find(".img").rotate(getPreviousAngle());  
});

});

<div class="box">
<div class="imgContainer">
    <img class="img" src="img/teste.jpg" alt="">
</div>

<div class="bottomActions">

    <div class="action">
        <a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla nunc, suscipit nec pellentesque sed, consequat ut ligula. Nam nec ullamcorper lacus. Duis cursus nunc nec interdum sollicitudin. Ut eu mollis elit, vel placerat purus. Phasellus viverra adipiscing luctus. Aenean quis ultricies ipsum. Fusce viverra sollicitudin dolor, nec cursus tellus mattis feugiat.">
        <img src="img/chat.png" alt=""></a>
    </div>

    <div class="actionHeart">
        <img  class="img-swap" src="img/heart_grey_on.png" alt="">
        <img  class="img-swap" src="img/heart_grey_off.png" alt="" style="display:none">
    </div>

    <div class="actionWarning">
        <img class="img-swap" src="img/warning.png" alt="">
        <img class="img-swap" src="img/warning_orange.png" alt="" style="display:none">
    </div>

    <div class="RotateBox">

        <div class="rotateLeft">
            <img class="rotLeft" src="img/rotateRemove90.png" alt="">
        </div>

        <div class="rotateRight">
            <img class="rotRight" src="img/rotateAdd90.png" alt="">
        </div>

    </div>

</div><!--bottomActions-->

<div class="imgContainer">
    <img class="img"  src="img/teste.jpg" alt="">
</div>

<div class="bottomActions">

    <div class="action">
        <a href="#" title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam nulla nunc, suscipit nec pellentesque sed, consequat ut ligula. Nam nec ullamcorper lacus. Duis cursus nunc nec interdum sollicitudin. Ut eu mollis elit, vel placerat purus. Phasellus viverra adipiscing luctus. Aenean quis ultricies ipsum. Fusce viverra sollicitudin dolor, nec cursus tellus mattis feugiat.">
        <img src="img/chat.png" alt=""></a>
    </div>

    <div class="actionHeart">
        <img  class="img-swap" src="img/heart_grey_on.png" alt="">
        <img  class="img-swap" src="img/heart_grey_off.png" alt="" style="display:none">
    </div>

    <div class="actionWarning">
        <img class="img-swap" src="img/warning.png" alt="">
        <img class="img-swap" src="img/warning_orange.png" alt="" style="display:none">
    </div>

    <div class="RotateBox">

        <div class="rotateLeft">
            <img class="rotLeft" src="img/rotateRemove90.png" alt="">
        </div>

        <div class="rotateRight">

            <img class="rotRight" src="img/rotateAdd90.png" alt="">
        </div>

    </div>

</div><!--bottomActions-->

私はこのスクリプトを使用しています

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="http://jqueryrotate.googlecode.com/svn/trunk/jQueryRotate.js"></script>

こんにちは、正しく機能していないこの jquery 関数があります。同じページで複数の画像を回転する必要がありますが、スクリプトが正しく機能していません。変数は画像から画像へと同じ値を取得するようです誰でも私を助けてもらえますか???

4

0 に答える 0