1

如果有人记得旧的 Moods of Norway 网站，那么当您滚动页面（水平）时，有一条带有轮子向前和向后旋转的轨道。我不能用自行车达到类似的效果。

这是我到目前为止所拥有的：

$(window).bind( "scroll", function() {      
    $("#wheel1, #wheel2").css({
        '-moz-transform':'rotate(360deg)',
        '-webkit-transform':'rotate(360deg)',
        '-o-transform':'rotate(360deg)',
        '-ms-transform':'rotate(360deg)',
        '-webkit-transition-duration':'3s',
        '-webkit-transition-delay':'now',
        '-webkit-animation-timing-function':'linear',
        '-webkit-animation-iteration-count':'infinite',
        '-webkit-animation':'rotating 2s linear infinite' 
    });
});

轮子使您第一次开始滚动时进行 360 度旋转，仅此而已。当你滚动时我需要轮子旋转，而且当你向前移动时我需要它们顺时针旋转，当你向后滚动时我需要它们逆时针旋转。如果当您使用锚定链接滚动页面时这也可以工作，那将是完美的。

请帮帮我:)

4

2 回答 2

2

我尝试了上述解决方案，但至少对我不起作用。我找到了这个，它工作正常：

var angle = 1;
jQuery(window).scroll(function() {
    jQuery(".rotate").css('-moz-transform', 'rotate('+angle+'deg)').css('-webkit-transform', 'rotate('+angle+'deg)').css('-o-transform', 'rotate('+angle+'deg)').css('-ms-transform', 'rotate('+angle+'deg)');
    angle+=6;
    if(angle==360) {
        angle=0;
    }
});
于 2012-10-22T17:10:25.647 回答
0

找到了怎么做，但不太明白它到底是如何工作的。所以如果有人在这里需要同样的效果。如果有人能告诉我它是如何工作的，请...... 

<script type="text/javascript">

//scroll
    $(window).scroll(function(e) {
        var top = $(document).scrollLeft();
        var wHeight = Math.max(20000,$(window).height());

        var oldPage = actPage;
        var actPage = Math.floor((top+(wHeight/2))/wHeight);


        if (actPage == 0) {
            $('#traktor #wheel2').css({'-webkit-transform':'rotate('+top+'deg)','-moz-transform':'rotate('+top+'deg)','-o-transform':'rotate('+top+'deg)','-ms-transform':'rotate('+top+'deg)','transform':'rotate('+top+'deg)'});
            $('#traktor #wheel1').css({'-webkit-transform':'rotate('+top+'deg)','-moz-transform':'rotate('+top+'deg)','-o-transform':'rotate('+top+'deg)','-ms-transform':'rotate('+top+'deg)','transform':'rotate('+top+'deg)'});
        }


    });

</script>
于 2012-03-24T08:54:40.263 回答