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

Using javascript to edit image transform style on consecutive button clicks

本文关键字：连续 按钮 javascript 编辑 图像变换 样式 使用      更新时间：2023-09-26

为了找出如何从我的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 h1> 3

(目前唯一一个做任何事情，但只旋转90次，即使连续点击按钮)

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

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

A。确保初始变量(使用第一个示例)"var total_rot"在您正在调用的函数的作用域之外。所以

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

B。请确保您添加正确的浏览器前缀，即。"ele.style。或者你可以写一个函数(@参见使用javascript检测css过渡(没有modernizr)?)

也，旋转一个正方形空div 90%....这在数学里叫什么来着…对称

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

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/

相关文章：