如何讓圖像（輪子）在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度旋轉。我需要輪子在您滾動時旋轉，另外我需要它們在您向前移動時順時針旋轉，向後滾動時逆時針旋轉。如果使用固定鏈接滾動頁面，這也是可行的。

請幫我:)

來源

2012-03-17 user1275640

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

來源

2012-03-24 08:54:40 user1275640

我試過你以上的解決方案，但它至少對我沒有用。我發現這個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; 
    } 
});

來源

2012-10-22 17:10:25 Mikeumus

如何讓圖像（輪子）在jQuery中滾動或滾動鼠標滾輪？

回答

相關問題