5

我有以下代码用于使用 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 中单击“旋转轮”时，轮子将正确旋转（并获得相同的结果）？

4

2 回答 2

3

在 Internet Explorer 中，-ms-transition在您的 css 和-ms-transformjavascript 中用于 Internet Explorer。有关工作示例，请参见此处（仅从 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 */

数字是弧度而不是度数。

于 2012-05-30T07:38:15.527 回答
3

我强烈建议使用 jQuery 和这个插件（你不想重新发明轮子：P，明白了吗？）：

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

支持的浏览器：

  • 互联网浏览器 6.0 >
  • 火狐 2.0 >
  • 野生动物园 3 >
  • 歌剧 9 >
  • 谷歌浏览器

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

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

于 2012-06-11T10:11:28.377 回答