CSS Transform jquery动画未按预期工作

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

预计PNG会回到它原来的位置，但它会少几个像素

小提琴：

代码：

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

---

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

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

更新 下面是一个简单的例子：

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

下面是一个演示：

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

更新 此外，您还可以检测正在使用的浏览器，并仅更新前缀为

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

---

这里有一个演示：

@FrankAstin查看我答案的最后更新。通过检测要使用的供应商前缀，可以更有效地更新元素的CSS。