17

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

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

8 回答 8

47

根据您需要支持的浏览器版本，您可以尝试 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');" />
于 2013-01-16T18:55:07.863 回答
22

使用 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)  */
    });
});
于 2013-01-16T18:59:33.910 回答
14

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

它将使 onclick 内的旋转更容易和更具可读性。

于 2013-01-16T18:48:11.650 回答
7

签出这个： JqueryRotate

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

在此处输入图像描述

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

$(document).ready(function(){
   $('img[src^="down_arrow"]').click(function(){
      $(this).rotate(90);
   });
});
于 2013-01-16T18:51:09.817 回答
7

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

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/

于 2017-07-28T20:49:54.273 回答
1

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

$(document).ready(function(){
    $("img").click(function(){
         $(this).rotate(90);
    });
 });
于 2017-09-13T07:02:35.787 回答
0

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

// 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);
于 2020-08-14T10:18:07.037 回答
0

我非常喜欢上面@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);
        }

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

于 2020-12-26T18:29:46.270 回答