jquery - CSS Transform jquery 动画未按预期工作

Question

在回答另一个问题时，我编写了一段简单的代码，用于在向下滚动页面时为 PNG 的旋转设置动画。这工作正常，但在向上滚动时反转动画无法正常工作。

预计 PNG 将返回到其原始位置，但它比原来少了几个像素。

fiddle :http://jsfiddle.net/EnSkJ/3/

代码:

var sdegree = 0;


var lastScrollTop = 0;
$(window).scroll(function(event){
   var st = $(this).scrollTop();
   if (st > lastScrollTop){
       sdegree += 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   } else {
      sdegree -= 1;
    var srotate = "rotate(" + sdegree + "deg)";
    $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
   }
   lastScrollTop = st;
});

Answer 1

您正在增加滚动时元素的旋转，但没有考虑用户滚动的距离。

您应该重新编写代码，以便根据用户滚动的距离来计算旋转量，而不是总是在旋转中添加或减去一度。这样您就可以设置起点和终点，使您的元素在这些点处始终处于相同的旋转。

更新

我正在谈论的一个简单例子在这里:

$(window).scroll(function(event){
   var srotate = "rotate(" + $(this).scrollTop() + "deg)";
   $("img").css({"-moz-transform" : srotate, "-webkit-transform" : srotate});
});

这是一个演示:http://jsfiddle.net/EnSkJ/4/

由于此代码根据滚动位置旋转元素，因此在相同的滚动位置处旋转将始终相同。

更新

您还可以检测正在使用的浏览器，并仅更新正确的供应商前缀 transform 属性:

var venderPrefix = ($.browser.mozilla) ? '-moz-' :
                   ($.browser.webkit) ? '-webkit-' : 
                   ($.browser.msie) ? '-ms-' : 
                   ($.browser.opera) ? '-o-' : '';

$(window).scroll(function(event){
   $("img").css(venderPrefix + "transform", "rotate(" + $(this).scrollTop() + "deg)");
});

这是一个演示:http://jsfiddle.net/EnSkJ/6/