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

【问题标题】：How to make image (wheel) spinning on scrolling or mouse wheel in jQuery?如何在 jQuery 中使图像（滚轮）在滚动或鼠标滚轮上旋转？
【发布时间】：2012-03-17 11:18:13
【问题描述】：

如果有人还记得旧的 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 度旋转，仅此而已。当你滚动时我需要轮子旋转，而且当你向前移动时我需要它们顺时针旋转，当你向后滚动时我需要它们逆时针旋转。如果在您使用锚定链接滚动页面时这也可以工作，那将是完美的。

请帮帮我:)

【问题讨论】：

GIF 动画不是更轻松的解决方案吗？
啊，所有这些特定于浏览器的属性！顺便说一句，如果你不能让它在 CSS 中工作，你总是有 SVG - 如果你想在 JS 中使用它，看看 Raphaël。
我确实想用 JS 来实现这个效果。我会看看这个库，我想它可能会有所帮助，我从来没有听说过。非常感谢您的建议
我会使用动画 gif，但我需要根据滚动运行移动

标签： jquery jquery-animate mousewheel horizontal-scrolling rotateanimation

【解决方案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;
    }
});

【讨论】：

【解决方案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>

【讨论】：