5

我不确定如何使用 jQuery，但有一个 CSS3 属性：transform: rotate

它可以与jQuery一起使用吗？

transform:rotate;
-ms-transform:rotate;
-webkit-transform:rotate;

JSFIDDLE

4

5 回答 5

12

试试这个小提琴：

http://jsfiddle.net/kDSqB/

计算出全轮换并不是 100% 准确，但我认为那天晚上是小提琴的环境。

这里的代码：

var $cog = $('#cog'),
$body = $(document.body),
bodyHeight = $body.height();

$(window).scroll(function () {
    $cog.css({
        'transform': 'rotate(' + ($body.scrollTop() / bodyHeight * 360) + 'deg)'
    });
});
于 2013-08-30T20:07:04.993 回答
10

这是一个简单的 jQuery 示例，检查修改后的 JSFiddle：

http://jsfiddle.net/g3k6h/5/

CSS 将为我处理 > 360 和 < 0 的旋转，所以我什至没有费心去做，而是根据滚动的距离调整旋转值。我也不担心试图解释一个完整的旋转，以便它更好地随着速度和距离滚动而流动。此解决方案依赖于 jQuery，但没有它也可以轻松完成。

$(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
    });
  });
})
于 2013-08-30T20:14:37.717 回答
3

您可以使用 DOM javascript 而不是 jQuery 以更简单的方式实现相同的结果。给你的图像一个 id，并添加以下 javascript：

<script>
window.onscroll = function() {scrollRotate()};<br/>
<br/>
function scrollRotate() {<br/>
  var navimg = document.getElementById("navimg");<br/>
  navimg.style.transform = "rotate("+ (window.pageYOffset/5) + "deg)"<br/>
}
</script>

在它显示“window.pageYOffset/5”的地方，您可以降低数字 (5) 以获得更快的旋转，或者将其设置得更高以获得更慢的旋转。

于 2020-01-02T21:25:32.297 回答
1

我从 OneOfOne 的解决方案开始，并为其添加了动画。scroll在事件上开始动画，以mouseup. http://jsfiddle.net/g3k6h/4/

var rotation = 0;
var interval;
var gear = $('.gear');

function animate() {
    gear.css('transform', 'rotate('+rotation+'deg)');
    rotation += 10;
    rotation %= 360;
}
function startAnim() {
    if (!interval) {
        interval = setInterval(animate, 100);
    }         
}    
function stopAnim() {
    clearInterval(interval);
    interval = null;
}    
$(document).scroll(startAnim).mouseup(stopAnim);

jamesgauld 的答案与我的相似，只是旋转量基于滚动位置，而我的只是在您滚动时不断旋转，这就是我对问题的理解。

于 2013-08-30T20:06:30.787 回答
-1

像这样，jQuery 应该使用正确的 css3 前缀。 http://jsfiddle.net/g3k6h/2/

$(function() {
    $('.gear').click(function() {
        $(this).css('transform', 'rotate(30deg)'); 
    });
});
于 2013-08-30T19:53:20.223 回答