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

供应商前缀并不是永久性的，因此 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);

    // ...
}
于 2013-08-08T00:37:49.933 回答