现在我们以这个苹果的图片作为例子
我将演示代码写在这个页面网页链接,下面解释其用法。
页面结构如图
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 里反倒有坑,题主可以自行选择是否使用。