使轮子在IE中旋转 [英] Making the wheel rotate in IE

问题描述

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

I have the following code for spinning a wheel with JS and 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浏览器。

It works fine in all browsers except for IE.

在此处查看工作演示： http://jsfiddle.net / maniator / H5LKy / 129 /

See a working demo here: http://jsfiddle.net/maniator/H5LKy/129/

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

How do I change my function so that when you click on "Spin Wheel" in IE, the wheel will spin correcty (and get the same results)?

推荐答案

我强烈建议使用jQuery，使用此插件（你不需要）想要重新发明轮子：P，搞定吗？）：

I would highly recommend using jQuery for this, with this plugin (you don't want to have to re-invent the wheel :P, get it?):

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

This is a simple plugin to allow you to rotate images (any angle) directly on client side (for ex. user generated content), and animate them using own functions. Main focus is to unify this behavior across different browsers.

支持的浏览器：

• Internet Explorer 6.0>


• Firefox 2.0>


• Safari 3>


• Opera 9 >


• 谷歌浏览器

• Internet Explorer 6.0 >
• Firefox 2.0 >
• Safari 3 >
• Opera 9 >
• Google Chrome

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

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

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