jquery CSS背景圖像旋轉

我有一個主背景設置爲它（齒輪），它是通過javascript（滾動）旋轉。在裏面我有另一個div（停止旋轉），我想停止旋轉。我只想旋轉背景，而不是內容。jquery CSS背景圖像旋轉

如何阻止第二個div旋轉？或者有沒有更簡單的解決方法呢？

HTML：

<body> 


<div class="gear"> 
    <div class="stop-rotate"> 
     <h1 style="color:white">random text</h1> 
    </div> 
</div> 

</body>

CSS：

body{ 
    height: 1000px; 
    background: blue; 
} 

.gear{ 
    background: url("http://i.imgur.com/zZ3fMuh.png"); 
    width: 101px; 
    height: 102px; 
}

的Javascript：

$(function() { 
    var rotation = 0, 
     scrollLoc = $(document).scrollTop(); 
    $(window).scroll(function() { 
     var newLoc = $(document).scrollTop(); 
     var diff = scrollLoc - newLoc; 
     rotation += diff, scrollLoc = newLoc; 
     var rotationStr = "rotate(" + rotation + "deg)"; 
     $(".gear").css({ 
      "-webkit-transform": rotationStr, 
      "-moz-transform": rotationStr, 
      "transform": rotationStr, 
     }); 
    }); 
})

我怎麼能停止轉動第二單嗎？

來源

2016-05-07 Arthur

您可以使第二個div在相反的方向旋轉。

$(function() { 
    var rotation = 0, rotation2=0, 
     scrollLoc = $(document).scrollTop(); 
    $(window).scroll(function() { 
     var newLoc = $(document).scrollTop(); 
     var diff = scrollLoc - newLoc; 
     rotation += diff, scrollLoc = newLoc; 
     rotation2 -= diff, scrollLoc = newLoc; 
     var rotationStr = "rotate(" + rotation + "deg)"; 
     var rotationStr2 = "rotate(" + rotation2 + "deg)"; 

     $(".gear").css({ 
      "-webkit-transform": rotationStr, 
      "-moz-transform": rotationStr, 
      "transform": rotationStr, 
     }); 
     $(".stop-rotate").css({ 
      "-webkit-transform": rotationStr2, 
      "-moz-transform": rotationStr2, 
      "transform": rotationStr2, 
     }); 

    }); 
})

這裏的jsfiddle：https://jsfiddle.net/3xcqjcsr/

來源

2016-05-07 11:25:27 adys

jquery CSS背景圖像旋轉

回答

相關問題