1

Question

我一直在寻找数小时无济于事，以便了解如何从我的javascript / css / html代码中获取此功能。

我有一个图像，每次点击我创建的旋转按钮时，我想旋转90度。

例如：

点击1：90度旋转

点击2：180度旋转（在实现中我假设90 + 90）

等等。

但是，当我按照我可以假设创建此功能的方式对其进行编码时，它无法正常工作。我可以让图像旋转一次......然后就不再了。

以下是我正在使用的代码。

按钮：

<button id = "rotationRight" data-dojo-type="dijit.form.Button" 
    onclick = "rotateRight(90);" ></button>

然后，我尝试了一些不同的javascript函数：

1

function rotateRight(deg){
    var total_rot;
    total_rot += deg;
    deg = total_rot;        
    document.getElementById("drag").style.transform = "rotate("+ deg +"deg)"
    if(total_rot == 360){
        total_rot = 0;
    }
}

2

function rotateRight(deg){
    var x += deg ;  
    document.getElementById("drag").style.transform = "rotate("+ x +"deg)"
}

3

（目前唯一一个可以做任何事情，但即使连续按下按钮也只旋转90次）

function rotateRight(deg){      
    document.getElementById("drag").style.transform = "rotate("+ deg +"deg)"
}

我试图在没有Jquery的情况下实现此功能。我目前仅限于DOJO，javascript，CSS3和HTML5。我觉得我很亲密，但我不是一个经验丰富的JavaScript开发人员，我的想法已经用完了。

Answer 1

一个。确保你的初始变量（使用你的第一个例子）＆＃34; var total_rot＆＃34;超出了您正在调用的函数的范围。所以

var total_rot = 0;
function rotateRight(ele,deg){
    total_rot += deg;
    deg = total_rot % 360;        
    ele.style.transform = "rotate("+ deg +"deg)";
}

B中。确保添加正确的浏览器前缀，即＆＃34; ele.style.webkitTransform＆＃34;或者你可以写一个函数（@see Detect css transitions using javascript (and without modernizr)?）

另外，将方形空div旋转90％......在数学中调用的是什么......对称性

Answer 2

每次单击按钮时，您都需要知道当前的旋转。我选择将其添加为数据属性，因为我不想解析变换字符串。但是，你也可以走那条路。

HTML

<img id="rotate" src="http://www.placekitten.com/100/100" data-rotation='0' />
<button id="rotationRight" data-dojo-type="dijit.form.Button" onclick="rotateRight(90,'rotate');">Rotate Div</button>

的Javascript

function getsupportedprop(proparray) {
    var root = document.documentElement //reference root element of document
    for (var i = 0; i < proparray.length; i++) { //loop through possible properties
        if (proparray[i] in root.style) { //if property exists on element (value will be string, empty string if not set)
            return proparray[i] //return that string
        }
    }
}

function rotateRight(deg, rotate) {
    var csstransform = getsupportedprop(['transform', 'MozTransform', 'WebkitTransform', 'msTransform', 'OTransform']);
    var el = document.getElementById(rotate);
    var rotation = parseInt(el.getAttribute("data-rotation")) + deg;
    if (rotation >= 360) rotation -= 360;
    el.style[csstransform] = 'rotate(' + rotation + 'deg)';
    el.setAttribute("data-rotation", rotation);
}

小提琴：http://jsfiddle.net/ZYGn5/2/

使用javascript在连续按钮点击上编辑图像变换样式

1

2

3

2 个答案: