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

JavaScript036

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度

// max - 期望的最大值

var randomNum = Math.floor(Math.random()*max)+1

这样就能随机到你所期望的最大值到1之间的随机数；你再根据取到的数值去做图片的对应关系。转动要看你是要什么样的效果用动画做一个，很简单

1、首先准备一个HTML文档，文档中准备好两个图片，接下来会对这两个图片进行旋转。

2、然后对HTML中的内容定义一些样式，如下图所示，主要是标题以及ul的样式。

3、接下来就给图片所在的li定义宽高，如下图所示。

4、然后给图片设置过渡效果，过渡使用transition属性，如下图所示。

5、当鼠标悬停在图片上时，通过rotate给其设置变形，如下图所示，正数代表的是顺时针，负数代表的是逆时针。

6、最后运行程序，会看到如下图所示的效果，鼠标放在图片上会顺时针或者逆时针旋转。