jQuery CSS背景图片旋转

Question

I have a main div with a background set to it (gear) which is rotating via javascript (scroll). 我有一个主div，背景设置为它（齿轮），它通过javascript（滚动）旋转。 Inside it I have another div (stop-rotate) which I want to stop from rotating. 在它里面我有另一个div（停止旋转），我想停止旋转。 I only want the background to rotate, not the content as well. 我只想旋转背景，而不要旋转内容。

How can I stop the 2nd div from rotating? 如何停止第二个div旋转？ Or is there any easier workaround it? 还是有更简单的解决方法？

Here is my JSFiddle 这是我的JSFiddle

HTML: HTML：

<body>


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

</body>

CSS: CSS：

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

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

Javascript: 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,
        });
    });
})

How can I stop the 2nd div from rotating? 如何停止第二个div旋转？

Answer 1

You can make the 2nd div rotate in the opposite direction. 您可以使第二个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,
        });

    });
})

Here is JSFiddle: https://jsfiddle.net/3xcqjcsr/ 这是JSFiddle： https ://jsfiddle.net/3xcqjcsr/

jQuery CSS背景图片旋转

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-05-07 11:25:27

jQuery CSS背景图片旋转

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-05-07 11:25:27

解决方案1
1 已采纳 2016-05-07 11:25:27