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);
});
精彩评论