开发者

How to add element rotation to jQuery?

I'm trying to do a simple extension of jQuery to allow image rotation via $("element").rotate(arbitraryNumber); later on.

From my understanding this is the correct method for setting the transform properties using jquery. I get the feeling I've forgotten something obvious..

    jQuery.fn.rotate=function(deg){
                        this.css({'transform': 'rotate开发者_如何学编程('+deg+'deg)'});
                        this.css({'-ms-transform': 'rotate('+deg+'deg)'});
                        this.css({'-moz-transform': 'rotate('+deg+'deg)'});
                        this.css({'-o-transform': 'rotate('+deg+'deg)'}); 
                        this.css({'-webkit-transform': 'rotate('+deg+'deg)'});
                        return this; 
                    };

EDIT: CODE REDUCTION

jQuery.fn.rotate=
function(deg){
                $(this).css({ 'transform': 'rotate('+deg+'deg)','-ms-transform': 'rotate('+deg+'deg)', '-moz-transform': 'rotate('+deg+'deg)', 
                    '-o-transform': 'rotate('+deg+'deg)', '-webkit-transform': 'rotate('+deg+'deg)' });
                return this;
             };

FURTHER EDIT Sorry my mistake, there was just a typo further in the calling.


(function( $ ){
$.fn.rotate = function(deg) {
    this.css({'transform': 'rotate('+deg+'deg)'});
    this.css({'-ms-transform': 'rotate('+deg+'deg)'});
    this.css({'-moz-transform': 'rotate('+deg+'deg)'});
    this.css({'-o-transform': 'rotate('+deg+'deg)'}); 
    this.css({'-webkit-transform': 'rotate('+deg+'deg)'});
    return this; 
};
})( jQuery );

//example
$(document).ready(function(){
    $('#sample').rotate(60);
});
0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜