js 怎么实现点击一次图片旋转90度，再点击再转90度呢

JavaScript019

js 怎么实现点击一次图片旋转90度，再点击再转90度呢,第1张

现在我们以这个苹果的图片作为例子

我将演示代码写在这个页面网页链接，下面解释其用法。

页面结构如图

javascript代码如下

$(function() {

var r = 0

$('img').click(function() {

r += 90

$(this).css('transform', 'rotate(' + r + 'deg)')

})

})

核心思路是控制图片的这个css属性：

   transform: rotate(360deg)

其中360deg就是360度，点一次旋转90度

给指定的元素添加一个 CSS 属性即可：

-o-transform: rotate(90deg)

-ms-transform: rotate(90deg)

-moz-transform: rotate(90deg)

-webkit-transform: rotate(90deg)

transform: rotate(90deg)

但仅对 IE8+ 或其他浏览器有效。

如果非得兼容 IE7 的话需要使用 filter 滤镜 DXImageTransform.Microsoft.Matrix。这个参数过于复杂，这里不展开写了，题主可以自行搜索一下相关信息。

楼上说的 jquery-rotate 在 IE7、8 上表现还可以，在 IE9 里反倒有坑，题主可以自行选择是否使用。