使用CSS变换滚动时如何旋转图像?

问题描述 投票:4回答:5

我不确定如何使用jQuery,但具有CSS3属性:transform:rotation

它可以与jQuery一起使用吗?

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

JSFIDDLE

jquery css3
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)'
    });
});

7
投票

这是一个简单的jQuery示例,请检查修改后的JSFiddle:

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

CSS将为我处理> 360且<0的旋转,因此,我什至不必理会并根据滚动距离调整旋转值。我也不担心要考虑一个完整的旋转,以使其在滚动速度和距离时更好地流动。此解决方案取决于jQuery,但没有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
    });
  });
})

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的答案与我的相似,除了旋转量基于滚动位置,在滚动时我的位置一直保持旋转,这就是我对问题的理解。


0
投票

您可以使用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)以获得更快的旋转速度,也可以提高数字以使其达到较低的旋转速度。


-1
投票

类似的事情,jQuery应该使用正确的css3前缀。http://jsfiddle.net/g3k6h/2/

$(function() {
    $('.gear').click(function() {
        $(this).css('transform', 'rotate(30deg)'); 
    });
});
© www.soinside.com 2019 - 2024. All rights reserved.