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

JavaScript013

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之间的随机数；你再根据取到的数值去做图片的对应关系。转动要看你是要什么样的效果用动画做一个，很简单

这是数学题啊....

Rotate = function(Source,Angle)//Angle为正时逆时针转动, 单位为弧度

{

var A,R

A = Math.atan2(Source.Y,Source.X)//atan2自带坐标系识别, 注意X,Y的顺序

A += Angle//旋转

R = Math.sqrt(Source.X * Source.X + Source.Y * Source.Y)//半径

return {

X : Math.cos(A) * R,

Y : Math.sin(A) * R

}

}

Rotate({X : 0,Y : 4},-Math.PI / 4)

注意, 由於牵扯浮点运算, 所以你如果调用

Rotate({X : 0,Y : 4},Math.PI / 2)

返回可能会是{X: -4, Y: 4.898425415289509e-16}

Y很小但不等於0

当然如果用矩阵变换也是可以写的..