Question

我有以下用JS和CSS旋转轮子的代码：

var prefix = (function() {
    if (document.body.style.MozTransform !== undefined) {
        return "MozTransform";
    }
    else if (document.body.style.WebkitTransform !== undefined) {
        return "WebkitTransform";
    }
    else if (document.body.style.OTransform !== undefined) {
        return "OTransform";
    }
    else {
        return "transform";
    }
}()),
    rotateElement = function(element, degrees) {
        var val = "rotate(-" + degrees + "deg)";
        element.style[prefix] = val;
        element.setAttribute("data-rotation", degrees);
    },
 spinModifier = function() {
      return Math.random() * 10 + 25;
 },
 modifier = spinModifier(),
 slowdownSpeed = 0.5,
spinWheelfn = function(amt) {
    clearTimeout(spinTimeout);
     modifier -= slowdownSpeed;
     if (amt == undefined) amt = parseInt(wheel.getAttribute('data-rotation'));
     rotateElement(wheel, amt);
     if (modifier > 0) {
        spinTimeout = setTimeout(function() {
            spinWheelfn(amt + modifier);
        }, 1000 / 5);
     } else {
        modifier = spinModifier();
        /**some other code...*/
     }
};

它适用于所有浏览器除以外的IE。

在此处查看有效的演示：http://jsfiddle.net/maniator/H5LKy/129/

如何更改我的功能，以便在IE中单击“旋转轮”时，滚轮将旋转正确（并获得相同的结果）？

Answer 1

在Internet Explorer中，在您的css中使用-ms-transition，在您的javascript中使用-ms-transform用于Internet Explorer。有关工作示例，请参阅here（仅从IE9开始支持，并且像往常一样，IE是糟糕的并且解析javascript，这就是为什么它非常慢）。

对于低于9的IE版本，以下代码将旋转45度：

filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476); /* IE6,IE7 */
-ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */

数字是弧度而不是度数。

Answer 2

我强烈建议使用jQuery，这个插件（你不想重新发明轮子：P，得到它？）：

这是一个简单的插件，允许您旋转图像（任何角度）   直接在客户端（例如用户生成的内容）和动画   他们使用自己的功能。主要关注的是统一这种行为   不同的浏览器。

支持的浏览器：


Internet Explorer 6.0＆gt;

Firefox 2.0＆gt;

Safari 3＆gt;

Opera 9＆gt;

Google Chrome

http://code.google.com/p/jqueryrotate/

http://code.google.com/p/jqueryrotate/wiki/Examples

使轮子在IE中旋转

2 个答案: