-3

我对 jQuery 比较陌生，我正在尝试创建一个自定义 jQuery 函数。该功能将旋转图像。够简单！这是我目前调用该函数的方式：

function rotate(degree) {
    $(this).css({
        "transform": "rotate(" + degree + "deg)",
        "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */
        "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */
        "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */
        "-o-transform": "rotate(" + degree + "deg)" /* Opera */
    });
}

我想像这样调用上面的函数：

$(".object").rotate(8);

我将如何更改上述功能以使其像这样工作？

4

2 回答 2

3 
$.fn.rotate = function(degree){
   this.each(function(){
      $(this).css({
        "transform": "rotate(" + degree + "deg)",
        "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */
        "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */
        "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */
        "-o-transform": "rotate(" + degree + "deg)" /* Opera */
      });
   });
   return this;
}
于 2012-12-09T18:32:41.490 回答
1

没有必要使用each(). jQuerycss()函数适用于整个集合，就像几乎每个 jQuery 函数一样。

这是（至少接近于）最佳实践，行业认可的创建新 jQuery 插件的方法。您的代码不起作用的原因是您所做的只是声明了一个全局函数。为了使 jQuery 对象可以访问该函数，您必须将该函数添加到 jQuery 对象本身，以便它与该对象的实例正确配对，从而this访问当前的 jQuery 集。如下所示。出于各种原因，您可以在大多数在线 jQuery 插件教程中阅读到函数中包含所有内容的有趣内容。请注意，在 jQuery 函数内部，不需要$(this)像this已经引用 jQuery 匹配集那样做。

(function($, window, undefined) {
   $.fn.rotate = function(degree) {
      return this.css({
         "transform": "rotate(" + degree + "deg)",
         "-ms-transform": "rotate(" + degree + "deg)", /* Internet Explorer */
         "-moz-transform": "rotate(" + degree + "deg)", /* Firefox */
         "-webkit-transform": "rotate(" + degree + "deg)", /* Safari and Chrome */
         "-o-transform": "rotate(" + degree + "deg)" /* Opera */
      });
   };
   $.fn.unrotate = function() {
      return this.css({
         "transform": "",
         "-ms-transform": "", /* Internet Explorer */
         "-moz-transform": "", /* Firefox */
         "-webkit-transform": "", /* Safari and Chrome */
         "-o-transform": "" /* Opera */
      });          
   };
}(jQuery, window));

我添加了一个unrotate功能，因此您也可以轻松删除 css。

pimvdbtransform说 jQuery 1.8 将自动尝试前缀，因此如果您使用的是该版本或更高版本，则可能除了属性之外不需要任何东西。

于 2012-12-09T18:34:16.433 回答