Question

我尝试设置单击链接后旋转的图像。共有3个链接。如果单击第二个链接，图像将旋转20度。如果在第二个链接后，单击第三个链接，图像将再旋转+20度。如果单击第一个链接，图像将旋转回默认位置概念简化：
link1 =图像默认位置
link2 =图像旋转20度 link3 = +另一个20degrees
如果从link3点击链接2 -20degrees。

网站使用fullpage.js。旋转图像用作导航点（参见例如here）。如果使用鼠标滚动，我不希望图像旋转，这远远超过我的触及范围......

作为基础我正在使用jQuery rotate plugins example 5

var value = 0
$("#img").rotate({ 
   bind: 
     { 
        click: function(){
            value +=90;
            $(this).rotate({ animateTo:value})
        }
     } 

});

到目前为止

jsfiddle ...我甚至不知道如何分配链接以便点击图片旋转。

非常感谢帮助。我不希望其他人完成所有事情，请至少引导我指导......

Answer 1

您只需将点击事件绑定到li即可。每次单击li时，请检查其文本。并基于旋转图像

尝试：

var value = 0;
$( "li" ).click(function() {
    var text=$(this).text();
    if(text==="Link1"){value=0;}
    if(text==="Link2"){value+=20;}
    if(text==="Link3"){value-=20;}
    $("#image").rotate({ animateTo:value});

});

DEMO

点击旋转图片，jquery

1 个答案: