1

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

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

小提琴：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;
});
4

1 回答 1

3

您正在增加滚动元素的旋转，但您没有考虑用户滚动了多远。

您应该重新编写代码，以便根据用户滚动的距离来计算旋转量，而不是总是从旋转中添加或减去 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/

于 2012-02-02T19:36:50.573 回答