-webkit-转换旋转问题

-webkit-transform Rotation Problems

本文关键字：问题 旋转 转换 -webkit-      更新时间：2023-09-26

好的，我已经查看了这个网站上的几乎所有旋转条目，但无法解决这个问题。 已经整整3天试图弄清楚了。 这很可能是非常简单的事情，但我就是无法理解。 问题是：我有 2 张具有旋转控件的图像。 但是，当我去旋转 1 时，它们都会旋转。 我希望它们不要同时旋转，而是自己旋转。 你可以在这里看到它：http://dl.dropbox.com/u/11770605/sample2.html

下面是 main.js 的以下代码：

    $(document).ready(function(){ $('.cc-element').rotatable(); });

这是标记：

    <span id="cc-element-1" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" ><image goes here></span>

我也试过：

    $(document).ready(function(){
    $('.cc-element').rotatable();
    $('.cc-element2').rotatable();
    });

和 

    <span id="cc-element-2" class="cc-element ui-draggable cc-active" style="-webkit-transform: rotate(0deg);" > <image goes here>< /span>

但该修改不起作用。 请帮助我，我必须尽快解决这个问题。

问题是你的"rotatable（）"插件对传递给它的this值进行操作，当你的选择器是".cc-element"时，它将是两个元素的列表。 因此，您对"roll（）"插件的调用将在整个列表上运行。

您需要将该插件中的适当代码包装在"each（）"迭代器中。像这样：

    $.fn.rotatable = function() {
      return this.each(function() {
        var $this = $(this),
          // ... the rest of the plugin, as it is now ...
      });
    };

您正在按类选择元素，并且它们都具有相同的类。 像这样更改它：

$(document).ready(function(){
    $('#cc-element').rotatable();
    $('#cc-element2').rotatable();
    });
相关文章：