Question

如果有人记得旧的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度旋转，就是这样。滚动时我需要轮子旋转，当你向前移动时我需要它们顺时针旋转，当你向后滚动时我需要逆时针旋转。如果使用完美的锚定链接滚动页面也可以。

请帮帮我:)。

Answer 1

我尝试过你上面的解决方案，但它至少对我不起作用。我找到了这个one，它运行正常：

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;
    }
});

Answer 2

了解如何做到这一点，但没有太多了解它究竟是如何工作的.. 因此，如果有人在这里需要相同的效果，那就是..如果有人能告诉我它是如何工作的，请... ..

<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>

如何在jQuery中使用滚动或鼠标滚轮旋转图像（滚轮）？

2 个答案: