每次点击时旋转图像jQuery

问题描述：

我想每次点击它时旋转一个图像..我已经创建了一个函数来做到这一点，但图像只是第一次点击它时旋转......此外，一旦图像旋转它会自动改变宽度和高度。我怎样才能保持每次相同的宽度和高度？每次点击时旋转图像jQuery

这是函数：

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

哪里'.rotate（）'从何而来？它不是标准的jQuery库的一部分 –

我已经使用过这个库：https://code.google.com/archive/p/jquery-rotate/downloads – AlexGH

为什么插件时你可以用'css'属性来实现'jquery'？ –

答

这可以很容易地通过使用JavaScript的只是来完成，例如工作会是这样

<div id="imgWrapper"> 
    <img src="Desert.jpg" id="image" onclick="rotateBy10Deg(this)"> 
</div> 

<script> 
    var delta =0; 
    function rotateBy10Deg(ele){ 
     ele.style.webkitTransform="rotate("+delta+"deg)"; 
     delta+=10; 
    } 
</script>

答

插件转换img成canvas，这就是点击不是第二次工作的原因。改变你的jQuery或参阅本demo

$(document).ready(function() { 
    $("img").click(function() { 
    $(this).rotate(45); 
    }); 
    $('body').on('click', 'canvas', function() { 
    $(this).rotate(45); 
    }); 
});

答

我做到了，如你所说，我用CSS中的JQuery：

CSS：

.rotate:active { 
transform: rotate(180deg) 
}

JQuery的：

$(document).ready(function() { 
     $("img").click(function() { 
//forcing img to rotate every time on click() 
      if ($(this).css("transform")=='none') { 
       $(this).css("transform", "rotate(180deg)"); 
      } 
      else { 
       $(this).css("transform","") 
      } 
     }) 
    })

我将度数改为180而不是45，因为我意识到这对于我想要做的更好。 – AlexGH

答

我建议在你的CSS文件中设置max-height和max-width。这将确保图像不会超过一定的尺寸。

答

此链接可能会帮助你：

Rotate image with onclick

在情况下的链接直接送你不想点击：

javascipt的

var rotate_factor = 0; 

function rotateMe(e) { 
    rotate_factor += 1; 
    var rotate_angle = (180 * rotate_factor) % 360; 
    $(e).rotate({angle:rotate_angle}); 
}

HTML

<img src='blue_down_arrow.png' onclick='rotateMe(this);' /></a>

答

我认为角度（45度）是参照其初始角度为0来计算的。一旦图像处于45度，只有在角度改变（例如90度）时才会旋转。所以，下面的代码可能工作

$(document).ready(function() { 
var angle = 0; 
$("img").click(function() { 
     angle = angle+45; 
    $(this).rotate(angle); 
}) 
})

每次点击时旋转图像jQuery

相关推荐