jquery - 在滚动条上来回旋转

Question

为什么我的代码不起作用？我希望 ".plane" 在我滚动时来回旋转。

<script type="text/javascript">
    $(function () {
        var sdegree = 0;
        $(window).scroll(function () {
            if (window.pageYOffset > 400) {
                sdegree ++;
                sdegree = sdegree + 3;
                var srotate = "rotate(" + sdegree + "deg)";
                $(".plane").css({
                    "-moz-transform": srotate,
                    "-webkit-transform" : srotate
                });
            } else {
                sdegree ++;
                sdegree = sdegree - 3;
                var srotate = "rotate(" + sdegree + "deg)";
                $(".plae").css({
                    "-moz-transform": srotate,
                    "-webkit-transform": srotate
                });
            }
        } 
</script>

Answer 1

简单准确*？

LIVE DEMO

$(function() {

  var $plane = $('.plane'); // Cache your elements!
  $(window).scroll(function() {
      $plane.css({transform: 'rotate('+ window.pageYOffset%360 +'deg)'}); 
  });

});

无需设置所有vendor-specific 属性，因为 jQuery 已经为您完成了开箱即用的设置。
而不是简单地使用 提醒运算符 % 来 360 度循环 :)

您想控制旋转速度吗？ 没有什么像这样微不足道的: demo

  var deg = (window.pageYOffset/10)%360;
  $plane.css({transform: 'rotate('+ deg +'deg)'}); 

• 我说准确是因为当滚动为 0 时，您的元素将始终返回到最初始的状态。