如何让图片在页面上随机移动并在移动时旋转角度(使用jQuery或CSS)

时间:2012-11-12 08:36:08

标签: jquery css html5 animation

我有一个div在页面上随机移动。

old question

我用“箭头”之类的图片替换div,现在我希望它随机移动,并指向正确的方向,(移动时改变旋转角度),并不总是指向上方。

arrow

我想可能会在移动时旋转一些角度,但我不知道如何计算新点和新点之间的角度。

提前致谢!!!

enter image description here

1 个答案:

答案 0 :(得分:3)

试试这个

$(document).ready(function(){
    animateIMG();

});

function makeNewPosition(){

    // Get viewport dimensions (remove the dimension of the div)
    var h = $(window).height() - 50;
    var w = $(window).width() - 50;

    var nh = Math.floor(Math.random() * h);
    var nw = Math.floor(Math.random() * w);

    return [nh,nw];    

}

function animateIMG(){
    var newq = makeNewPosition();
    $('img').animate({ top: newq[0], left: newq[1] }, function(){
      animateIMG();        
    });

};
带速度控制的{p> JsFiddle http://jsfiddle.net/D6Svc/