我有一个设置了背景(齿轮)的主 div，它通过 javascript(滚动)旋转。在它里面我有另一个 div (停止旋转)我想停止旋转。我只想旋转背景，而不是内容。
如何阻止第二个 div 旋转？或者有更简单的解决方法吗？
这是我的 JSFiddle
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,
});
});
})
如何阻止第二个 div 旋转？
最佳答案
您可以使第二个 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/
关于javascript - Jquery CSS 背景图像旋转，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/37087826/