0

私はJavaScriptを書くのが初めてで、jQueryも初めてです。これらの (3) 画像をボディ ロード時にページの上部にタンブルさせようとしています。FF と Chrome では問題なく動作しますが、MSIE、Safari、Opera ではまったく動作しません。ここに自分の html または css を含める方法がわかりません。ウェブサイトは tumbleweedcolorado.com です

これは JavaScript で、html は以下のとおりです。

 //external js file

   function slideIn(el){
         var elem = document.getElementById(el);
          elem.style.transition = "left 5.0s ease-in 0s";
           elem.style.left = "950px";
            }
    function slideOver(el){
         var elem = document.getElementById(el);
          elem.style.transition = "left 5.0s ease-in 0.7s";
           elem.style.left = "950px";
            }
    function slideRight(el){
         var elem = document.getElementById(el);
          elem.style.transition = "left 5.0s ease-in 2.5s";
           elem.style.left = "950px";
            }

    var looper;
    var degrees = 0;
    function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
        if(navigator.userAgent.match("Chrome")){
        elem.style.WebkitTransform = "rotate("+degrees+"deg)";
        } else if(navigator.userAgent.match("Firefox")){
        elem.style.MozTransform = "rotate("+degrees+"deg)";
        } else if(navigator.userAgent.match("MSIE")){
        elem.style.msTransform = "rotate("+degrees+"deg)";
        } else if(navigator.userAgent.match("Opera")){
        elem.style.OTransform = "rotate("+degrees+"deg)";
        } else if(navigator.userAgent.match("Safari")){
        elem.style.AppleWebKitTransform = "rotate("+degrees+"deg)";
        } else {
        elem.style.transform = "rotate("+degrees+"deg)";
    }
    looper = setTimeout('rotateAnimation(\''+el+'\','+speed+')',speed);
    degrees++;
    if(degrees > 359){
    degrees = 1;
    }
    }
4

1 に答える 1

0

ベンダー プレフィックスは永続的なものではないためWebkitTransform、たとえば、Chrome が常に を使用するとは限りません。

ブラウザのスニッフィングよりも機能検出を使用して、存在する適切なプロパティ名を決定する方が適切です。

if ('transform' in elem.style) {
    elem.style.transform = "rotate("+degrees+"deg)";
} else if ('webkitTransform' in elem.style) {
    elem.style.webkitTransform = "rotate("+degrees+"deg)";
} // etc.

ただし、次のように CSS プロパティ名を使用することもできますelem.style.setProperty()。

function rotateAnimation(el,speed){
    var elem = document.getElementById(el);
    var transform = "rotate("+degrees+"deg)";

    elem.style.setProperty('-webkit-transform', transform);
    elem.style.setProperty('-moz-transform', transform);
    elem.style.setProperty('-ms-transform', transform);
    elem.style.setProperty('-o-transform', transform);
    elem.style.setProperty('transform', transform);

    // ...
}
于 2013-08-08T00:37:49.933 に答える