jquery旋转图像onclick

我试图实现这一点（90度旋转），但没有错误。 此图像位于一个

标记中，在该标记中它已经具有一个toggle jquery函数

<?php echo "<img src='down_arrow.png' onclick='$(this).animate({rotate: \"+=90deg\"});' />"; ?>

---

考虑jQuery扩展，例如：

这将使onclick内部的旋转更加容易和可读。

请检查以下内容：

这有一些小事情要做，您可以在图像本身中看到一个代码示例

因此，在您的情况下，您可以这样做：

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});

---

根据您需要支持的浏览器版本，您可以尝试CSS Transforms

首先，定义一个CSS类，如下所示：

.rotated {
  transform: rotate(90deg);
  -ms-transform: rotate(90deg); /* IE 9 */
  -moz-transform: rotate(90deg); /* Firefox */
  -webkit-transform: rotate(90deg); /* Safari and Chrome */
  -o-transform: rotate(90deg); /* Opera */
}

然后，您可以在单击链接时使用jQuery添加类：

<img src="down_arrow.png" onclick="$(this).addClass('rotated');" />

---

在图像单击时使用css规则

-webkit transform

和

-moz transform

的组合。例如，要将图像旋转90度，请在单击时应用以下css规则

$('img').click(function(){
    $(this).css({
        "-webkit-transform": "rotate(90deg)",
        "-moz-transform": "rotate(90deg)",
        "transform": "rotate(90deg)" /* For modern browsers(CSS3)  */
    });
});

---

这将使您能够执行每个剪辑的附加旋转

var degrees = 0;
$('.img').click(function rotateMe(e) {

    degrees += 90;

    //$('.img').addClass('rotated'); // for one time rotation

    $('.img').css({
      'transform': 'rotate(' + degrees + 'deg)',
      '-ms-transform': 'rotate(' + degrees + 'deg)',
      '-moz-transform': 'rotate(' + degrees + 'deg)',
      '-webkit-transform': 'rotate(' + degrees + 'deg)',
      '-o-transform': 'rotate(' + degrees + 'deg)'
    }); 

});     

---

这是将图像旋转90度的示例，如下代码所示：

$(document).ready(function(){
    $("img").click(function(){
         $(this).rotate(90);
    });
 });

---

我使用了上面的答案并创建了一个方法来进行增量旋转，方法是将当前旋转存储在目标元素的数据属性中。换句话说，每次调用该函数时，它都会添加到现有的旋转中

// Increments the rotation (in degrees) for the element with the given id
function addRotation(id, degrees) {
    var control = $('#' + id);
    var currentRotation = control.data('rotation');
    if (typeof currentRotation === 'undefined') currentRotation = 0;

    degrees += parseInt(currentRotation);

    control.css({
        'transform': 'rotate(' + degrees + 'deg)',
        '-ms-transform': 'rotate(' + degrees + 'deg)',
        '-moz-transform': 'rotate(' + degrees + 'deg)',
        '-webkit-transform': 'rotate(' + degrees + 'deg)',
        '-o-transform': 'rotate(' + degrees + 'deg)'
    });

    control.data('rotation', degrees);
}

用法：

<img id='my-image' />

addRotation('my-image', 90);
addRotation('my-image', -90);

添加旋转（“我的图像”，90）；
addRotation（'my-image'，-90）；

我非常喜欢上面@Savage的回答。我希望能够将一个类添加到元素中，以使任何具有该类的图像都可以旋转。我还想让它在我点击右侧时向右（顺时针）旋转，在我点击左侧时向左（逆时针）旋转

这里是我连接点击事件（）的地方-我确实在页面上使用jQuery，所以请原谅我的放纵-但这会根据您在图像上点击的位置为您提供正确的旋转：

        $('.tot-rotatable-image').on('click', function (e) {
            var elm = $(this);
            var xPos = e.pageX - elm.offset().left;

            if((elm.width() / 2) >= xPos){
                addRotation(e, -90);
            } else {
                addRotation(e, 90);
            }
        });

这里是addRotation的一个稍加修改的版本，它只接受事件而不是选择器。这与@Savage所采用的将当前旋转附加到DOM元素的方法尤其有效

        function addRotation(evt, degrees) {
            var control = $(evt.currentTarget);
            var currentRotation = parseInt(control.data('rotation'));
            degrees += isNaN(currentRotation) ? 0 : currentRotation;

            control.css({
                'transform': 'rotate(' + degrees + 'deg)',
                '-ms-transform': 'rotate(' + degrees + 'deg)',
                '-moz-transform': 'rotate(' + degrees + 'deg)',
                '-webkit-transform': 'rotate(' + degrees + 'deg)',
                '-o-transform': 'rotate(' + degrees + 'deg)'
            });

            control.data('rotation', degrees);
        }

---

我确实有一些与图像相互重叠相关的样式问题，但我仍然对如何快速、轻松地将其散布感到满意。

您需要一个用于旋转的插件，您知道吗？不要给我们看服务器端代码，生成的html就足够了。你正在使用补丁吗？不，我以为它包含在jquery中：s我会查出来的，谢谢you@mpm天哪，如果他知道他需要一个插件，他会这么问吗？谢谢，这很有效。图像仅旋转一次：

onclick='$（this.rotate（180）；'

这是一个评论还是一个问题？你需要做一个变量旋转，我不知道如何获得项目的旋转，但在psuedocode中，它类似于

onclick='$（this.rotate（180）；'抱歉，请更新到以下链接：仍然只旋转一次为什么我的代码只工作一次
onclick='$（this）.rotate（180）；'图像已旋转，但如果我再次单击它doest@ArtPlanteur可能是因为您已经旋转了180度。那么您将如何保存旋转后的图像呢？如果我们只知道何时通过jQueryFunderful解决方案向元素添加类或id，那么您可以完成多少工作，这简直令人惊讶。通过遵循jsfiddle非常清楚要做什么。就我而言，这正是医生的要求。非常感谢！缺少一些结束括号