jquery旋转图像onclick答案

【问题标题】：jquery rotate image onclickjquery旋转图像onclick
【发布时间】：2013-01-16 18:44:40
【问题描述】：

我正在尝试实现这一点（90 度旋转），但它失败且没有错误。此图像位于 <a></a> TAG 中，其中已经具有切换 jquery 功能。

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

【问题讨论】：

您需要一个旋转插件，您知道吗？并且不向我们展示服务器端代码，生成的 html 就足够了。
你正在使用this补丁？
不，我认为它包含在 jquery 中：s 我会检查一下，谢谢
@mpm 哎呀，如果他知道他需要一个插件，估计他会问 SO？

标签： jquery

【解决方案1】：

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

首先，像这样定义一个 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');" />

【讨论】：

当我们只知道何时通过 jquery 向元素添加类或 id 时，我们可以完成多少工作，这简直令人惊讶

【解决方案2】：

在图像点击时使用 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)  */
    });
});

【讨论】：

【解决方案3】：

考虑一个 jQuery 扩展，例如：jQueryRotate

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

【讨论】：

谢谢，它有效。图片只旋转一次：onclick='$(this).rotate(180);'
这是评论还是问题？
你需要做一个可变的旋转，我不知道如何获得项目的旋转，但在伪代码中它会像onclick='$(this).rotate(180);'
对不起，请更新到以下链接：code.google.com/p/jquery-rotate
仍然只旋转一次

【解决方案4】：

结帐：JqueryRotate

这个有点小题大做，你可以在图片中看到一个代码示例。

所以在你的情况下你可以这样做：

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

【讨论】：

为什么我的代码只能运行一次？ onclick='$(this).rotate(180);' 图片被旋转了，但是如果我再次点击它就不会了
@ArtPlanteur 可能是因为你已经旋转了 180 度。
那么你将如何保存旋转后的图像？

【解决方案5】：

这将使您能够对每个点击执行额外的旋转

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)'
    }); 

});

https://jsfiddle.net/Lnckq5om/1/

【讨论】：

绝妙的解决方案。遵循 jsfiddle 非常清楚该做什么。就我而言，这正是医生所要求的。非常感谢！
缺少一些右括号

【解决方案6】：

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

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

【讨论】：

【解决方案7】：

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

// 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);

【讨论】：

【解决方案8】：

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

这里是我连接点击事件的地方 (from this post) - 我确实在页面上使用 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);
        }

我确实有一些与图像重叠位置有关的样式问题，但我仍然对如何快速轻松地散布这些内容感到满意。

【讨论】：