jquery在同一页面上旋转多个图像,一次一个,按钮单击

时间:2013-07-23 15:40:33

标签: jquery rotation

$(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功能无法正常工作。我需要在同一页面上旋转多个图像,但脚本无法正常工作。变量似乎得到相同的值从图像到图像到图像任何人都可以请帮助我???

0 个答案:

没有答案