Question

在对另一个问题的回答中，我在向下滚动页面时制作了一段简单的代码来动画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;
});

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/

CSS转换jquery动画未按预期工作

1 个答案:

更新

更新