Javascript 我怎样才能：做一个div“；跟随；另一个，清理运动，并保持在一个窗口内的东西

我现在有一堆动物（“.animalorb”div）在屏幕上漫游，但我有几个问题：

1） 我需要所有的div（“.animalorbs”）留在屏幕上。 2） 我希望随机运动更优雅，不那么急促。 3） 当前解决方案所需的处理量使页面难以运行

这是我的密码笔：

（下面是动画代码片段）

这里有一个代码笔，它具有更优雅的随机性和更少的页面“粗鲁”行为：

第二支钢笔（有蝠鲼的那支）并没有使用所有的div，它只是一次又一次地生成一个div

谁能帮我为第一页生成更好的代码，或者帮我合并第一页和第二页上的代码

非常感谢！

---

-杰克

通过在图像处理软件中缩小图像的比例，可以大大提高性能。目前，他们都是全高清，这是一个很大的工作规模缩小和动画实时为每个图像

由于动物球体的宽度和高度为100px，因此100x100px的图像大小就足够了

这是一段代码笔1中的JSFIDLE代码，但是图像由较小尺寸的占位符图像交换（使用

background:url（“http://placehold.it/100x100）；

）：

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([3,4,5], [6,7,8]) * (h/2));
var nw = Math.floor(Math.random([3,4,5], [6,7,8]) * (w/2));

return [nh,nw];    

}

function animateDiv(c){
    var moveit = makeNewPosition();
    $(c).animate({ top: moveit[0], left: moveit[1] },  10000, "linear",     function(){
      animateDiv(c);        
    });