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 で [Spin​​ Wheel] をクリックすると、ホイールが正しく回転する (そして同じ結果が得られる) ように関数を変更するにはどうすればよいですか?

4

2 に答える 2

3

Internet Explorer では-ms-transition、CSS および-ms-transformInternet Explorer の JavaScript で使用します。実際の例については、こちらを参照してください（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、わかりますか?):

これは単純なプラグインで、クライアント側で直接画像 (任意の角度) を回転させ (ユーザー生成コンテンツなど)、独自の関数を使用してアニメーション化することができます。主な焦点は、さまざまなブラウザー間でこの動作を統一することです。

サポートされているブラウザ:

  • Internet Explorer 6.0 >
  • Firefox 2.0 >
  • サファリ3 >
  • オペラ9 >
  • グーグルクローム

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

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

于 2012-06-11T10:11:28.377 に答える