javascript - 关于单击具有特定 id 的元素后图像旋转

Question

ul 中的 Logo 和元素一旦单击就会旋转图像。默认情况下，图像已经旋转一定 Angular ，然后每次单击图像都会旋转到必要的值。

到目前为止，我使用的是以下内容:

$("#objRotates").css('opacity','.2');
var value = 0;
var prev_value = 0;
$( "li" ).click(function() {
    var text=$(this).text();
    if(text==="text1"){value=0;}
    if(text==="text2"){value=33;}
    if(text==="text3"){value=66;}
    if(prev_value != value){
        $("#objRotates").animate({opacity:'1'});
        $("#objRotates").rotate({
            animateTo:value,
            easing: $.easing.easeInOutExpo,
            center: ["25px", "150px"],
            callback: function(){$("#objRotates").animate({opacity:'0.2'});}
        });
    }
    prev_value = value;
});

上面的代码是之前使用的代码，其中图像起始位置为 0，其动画是从链接文本触发的。

使用 jqueryRotate.js 示例( here )

如何更改代码，以便图像开始位置为一定 Angular ，并且单击具有特定 ID 的元素时动画开始？

至少给出线索..因为现在，看着我的旧代码，我迷失了。提前致谢。

简化 FIDDLE

Answer 1

好的，我创建了几个示例供您查看。第一个是非常基础的，我稍微简化了代码以使其更容易理解。这个事件仅使用完全静态的值和静态 elementId，我很确定根据您昨天对我的评论的回复回答了您的问题。 http://jsfiddle.net/x9ja7/594/

$("#elementId").click(function () {
    var startingAngle = 45;
    var endingAngle = 90;
    var elementToRotate = "img";
    $(elementToRotate).rotate({
        angle: startingAngle,
        animateTo: endingAngle
    });
});

但我还想给出另一个示例，该示例对于多个元素来说是动态且可重复的。使用上面的代码，如果您想通过单击不同的元素来执行此动画，则必须一遍又一遍地复制/粘贴相同的代码。这是一个替代方案。在此示例中，您在可点击元素的数据属性中设置了所有参数，那么该功能是完全可重复的，您只需编写一次。更少的代码=每个人都高兴!示例如下:http://jsfiddle.net/x9ja7/595/

//#region Default starting angles
$("#image1").rotate({ angle: 90 });
$("#image2").rotate({ angle: 20 });
//#endregion

$(".rotateAction").click(function () {
    //#region Optional parameter - used in the optional callback function
    var $self = $(this);
    //#endregion
    var startingAngle = Number($(this).attr("data-startingangle"));
    var endingAngle = Number($(this).attr("data-endingangle"));
    var elementToRotate = $(this).attr("data-elementtorotate");

    //#region If the current angle is the ending angle, reverse the animation - this can be removed if you want, I thought it may be cool to show some of the things you can do with this.
    var currentAngle = $(elementToRotate).getRotateAngle();
    if ( currentAngle[0] === endingAngle) {
        startingAngle = Number($(this).attr("data-endingangle"));
        endingAngle = Number($(this).attr("data-startingangle"));
    }
    //#endregion

    $(elementToRotate).rotate({
        angle: startingAngle,
        animateTo: endingAngle
        //#region This is optional - uncommenting this code would make the animation single-use only
        //, callback: function () { $self.off().removeClass("clickable"); }
        //#endregion
    });
});

希望这有帮助。如果您需要任何其他帮助，请告诉我。