[英]Jquery CSS Background Image rotate
我有一个主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/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.