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时，你的元素将始终以初始状态返回。

Answer 2

由于语法原因，您的$ .css（）将无效。 $('.myDiv').css('background-color', 'red')没问题，当您使用括号时，它会变为$('.myDiv').css({backgroundColor: 'red'})。

试用此代码：

$(function() {
  var sdegree = 0;
  $(window).scroll(function() {
    sdegree = sdegree + 4;
    var srotate = "rotate(" + sdegree + "deg)";
    $(".plane").css({
      transform : srotate
    });
  });
});

JSbin：http://jsbin.com/nuqezazu/1/

我的贡献：

$(function() {
  var sdegree = 0;
  var lastScrollTop = 0;
  $(window).scroll(function() {
    var st = $(this).scrollTop();
    sdegree = ( st > lastScrollTop ) ? sdegree + 4 : sdegree - 4;
    var srotate = "rotate(" + sdegree + "deg)";
    $(".plane").css({transform : srotate});
   lastScrollTop = st;
  });
});

JSbin：http://jsbin.com/nuqezazu/2/

滚动后退和后退

2 个答案: