Question

我是新手写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;
    }
    }

Answer 1

供应商前缀不是永久性的，因此Chrome并不总是使用WebkitTransform。

使用特征检测比使用浏览器嗅探更好，确定存在的相应属性名称：

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);

    // ...
}

javascript在MSIE，Safari，Opera中无效;适用于FF，Chrome;如何使用jQuery代替？

1 个答案: