如何让图像（轮子）在jQuery中滚动或滚动鼠标滚轮？

问题描述：

如果有人记得挪威的旧网站，那么当你滚动页面时（水平方向），有一个滚轮向前和向后旋转的轨道。我不能用自行车获得类似的效果。如何让图像（轮子）在jQuery中滚动或滚动鼠标滚轮？

这是我到目前为止有：

$(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' 
    }); 
});

车轮让你开始滚动，这就是它第1次这种360度旋转。我需要轮子在您滚动时旋转，另外我需要它们在您向前移动时顺时针旋转，向后滚动时逆时针旋转。如果使用固定链接滚动页面，这也是可行的。

请帮我:)

不会GIF动画是一个更轻的解决方案？ – 2012-03-17 11:22:55

啊，所有这些浏览器特定的属性！就像旁白一样，如果你不能在CSS中工作，你总会得到SVG - 如果你想用JS来看看Raphaël。 – halfer 2012-03-17 11:51:31

我想用JS实现这种效果..我会看这个库，我想这可能有助于某种方式，我从来没有听说过它。非常感谢您的建议 – user1275640 2012-03-22 13:03:00

答

发现了如何做到这一点，但并没有太多了解究竟是如何操作呢.. 所以，如果有人在这里需要同样的效果是..不过如果有人能告诉我它是如何工作的，请..

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

答

我试过你以上的解决方案，但它至少对我没有用。我发现这个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; 
    } 
});

如何让图像（轮子）在jQuery中滚动或滚动鼠标滚轮？

相关推荐