缓慢地移动图片 [英] Moving a picture around slowly

问题描述

我有一张气球的照片。我需要它随机播放我的页面（它有点小）。我只需要在我的页面上半部分飞行。我发现以下代码：

  $（＃Friends）。animate（{
 top： -  = 30px，
}，持续时间）; 
  

但我不确定我如何循环它并将它放在x轴上， y轴。谢谢，如果你可以！我有jQuery启用：）

解决方案

CSS

  #friends {position：absolute; } 
  

标记

 < img src =http://jsfiddle.net/img/logo.png
 id =friends/> 
  

JS

  function moveit（）{
 
 var newTop = Math.floor（Math.random（）* 350）; 
 var newLeft = Math.floor（Math.random（）* 1024）; 
 var newDuration = Math.floor（Math.random（）* 5000）; 
 $ b $（'＃friends'）。animate（{
 top：newTop，$ b $ left：newLeft，
}，newDuration，function（）{
 moveit（）; 
}）; 
 
 
 $ b $（document）.ready（function（）{
 moveit（）; 
}）; 
  

现场演示：
http://jsfiddle.net/W69s6/embedded/result/


>
更新更新现场演示： http://jsfiddle.net/9cN4C/



（旧演示已过时并且链接已断开，但代码仍然正确，因此仅供参考，不能用于演示）

I have a picture of an Air balloon. I need it to fly around my page randomly (it is kind of small). I need it only to fly in the top half of my page. I found the following code:

$("#Friends").animate({ 
        top: "-=30px",
      }, duration );

But I'm not sure how I could loop it and have it go both on the x axis and the y axis. Thanks if you can! I do have jQuery enabled :)

解决方案

CSS

#friends { position: absolute; }

Markup

<img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

JS

function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

Live demo: http://jsfiddle.net/W69s6/embedded/result/

More updated Live Demo: http://jsfiddle.net/9cN4C/

(old demo is obsolete and has a broken link, however the code is still correct so it is left for reference, not for demonstration)

这篇关于缓慢地移动图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！