Question

我正在努力实现这一目标（90度旋转），但它没有错误地失败。此图像位于<a></a> TAG内，其中已有切换jquery函数。

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

Answer 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');" />

Answer 2

在图片点击时使用css规则-webkit-transform和-moz-transform的组合。例如，按照css规则点击将图像旋转90度

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

Answer 3

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

它将使onclick内部的旋转更容易，更易读。

Answer 4

结帐：JqueryRotate

这没有什么可做的，你可以在图像本身看到一个代码示例。

enter image description here

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

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

Answer 5

这将使您能够执行每个clik

的额外轮换

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/

Answer 6

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

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

Answer 7

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

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

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

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

jquery旋转图像onclick

8 个答案: