使用onclick旋转图像 [英] Rotate image with onclick

问题描述

我尝试制作一个切换按钮，每次点击我的图像（箭头）将旋转180度：

I try to make a toggle button where my image (an arrow) will be rotated by 180 degrees each click:

<a href='#' onclick='$(\"#divToggle\").slideToggle(\"slow\");'>
<img src='blue_down_arrow.png' onclick='$(this).rotate(180);' /></a>

<div id='divToggle' style='display:none;'>...CONTENT...</div>";

此代码切换我的div，但图像仅在第一次点击时旋转，然后保持向上。我使用此： http://code.google.com/p/jqueryrotate/

This code toggle my div but the image rotates only for the first click and then stays "up". I am using this : http://code.google.com/p/jqueryrotate/

推荐答案

这是因为旋转角度的值是绝对值，而不是基于最后一次旋转。

This is because the value for rotate angle is absolute, not based on the last rotate.

工作代码：

jQuery

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>

更新：更短的代码

var rotate_angle = 0;

<img src='blue_down_arrow.png' onclick='rotate_angle = (rotate_angle + 180) % 360; $(this).rotate(rotate_angle);' /></a>

这篇关于使用onclick旋转图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！