Question

点击后ul的徽标和元素会旋转图片。默认情况下，图像已经旋转了一定的度数，然后在每次点击图像上旋转到必要的值。

到目前为止，我使用了以下内容：

$("#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）

如何更改代码，以便在点击具有特定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
    });
});

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

关于具有特定id的元素的图像旋转

1 个答案: