使用jquery随机移动多个div_Jquery_Html_Css

使用jquery随机移动多个div

jquery html css

使用jquery随机移动多个div,jquery,html,css,Jquery,Html,Css,我用这个jQuery小提琴我正在做一个小鸟射击游戏，每一级小鸟增加，这只是这些div，但问题是当我增加这些时，它们每次都在右下角离开容器。我想要的是div应该只接触容器的边界我的代码是 <!DOCTYPE html> <html> <head> <script src="/js/jquery-2.0.2.min.js"></script> <style> div#container {height:50%;

我用这个jQuery小提琴

我正在做一个小鸟射击游戏，每一级小鸟增加，这只是这些div，但问题是当我增加这些时，它们每次都在右下角离开容器。我想要的是div应该只接触容器的边界

我的代码是

<!DOCTYPE html>
<html>
<head>
 <script src="/js/jquery-2.0.2.min.js"></script>
<style>
div#container {height:50%;
                   width:50%;
       border:2px solid white;           



    }
    .a {
width: 120px;
height:120px;

position:relative;

}
</style>

 <script type="text/javascript">
 function randomFromTo(from, to) {
                return Math.floor(Math.random() * (to - from + 1) + from);
            }

            function moveRandom(obj) {
                /* get container position and size
                 * -- access method : cPos.top and cPos.left */
                var cPos = $('#container').offset();
                var cHeight = $('#container').height();
                var cWidth = $('#container').width();

                // get box padding (assume all padding have same value)
                var pad = parseInt($('#container').css('padding-top').replace('px', ''));

                // get movable box size
                var bHeight = obj.height();
                var bWidth = obj.width();

                // set maximum position
                maxY = cHeight ;
                maxX = cWidth;

                // set minimum position
                minY = cPos.top + pad;
                minX = cPos.left + pad;

                // set new position         
                newY = randomFromTo(minY, maxY);
                newX = randomFromTo(minX, maxX);

                obj.animate({
                    top: newY,
                    left: newX
                }, 1000, function () {
                    moveRandom(obj);
                });
            }



            $('.a').each(function () {
                moveRandom($(this));
            });
</script>
</head>
<body>



<div id="container">
        <img src="graphics-birds-917288.gif" class='a'/>
        <img src="graphics-birds-917288.gif" class='a'  />
        <img src="graphics-birds-917288.gif" class='a' />
        <img src="graphics-birds-917288.gif" class='a' />
        <img src="graphics-birds-917288.gif" class='a' />
    </div>
</body>
</html>


集装箱高度：50%；
宽度：50%；
边框：2倍纯白；
}
.a{
宽度：120px；
高度：120px；
位置：相对位置；
}
函数随机FromTo（from，to）{
返回Math.floor（Math.random（）*（to-from+1）+from）；
}
函数移动随机（obj）{
/*获取容器的位置和大小
*--访问方式：cPos.top和cPos.left*/
var cPos=$（“#容器”）.offset（）；
var cHeight=$（“#容器”）.height（）；
var cWidth=$（“#容器”）.width（）；
//获取框填充（假设所有填充具有相同的值）
var pad=parseInt（$（'#container'）.css（'padding-top'）.replace（'px'，''）；
//获得可移动的盒子大小
var BHHEIGHT=物体高度（）；
var bWidth=obj.width（）；
//设置最大位置
maxY=cHeight；
maxX=cWidth；
//设置最小位置
minY=cPos.top+pad；
minX=cPos.left+pad；
//重新定位
newY=随机FromTo（minY，maxY）；
newX=randomFromTo（minX，maxX）；
对象动画({
上图：newY，
左：纽克斯
}，1000，函数（）{
移动随机（obj）；
});
}
$（'.a'）。每个（函数（）{
moveRandom（$（this））；
});

您删除了一个重要元素

maxY = cHeight;
maxX = cWidth;

这应该是

maxY = cPos.top + cHeight - bHeight;
maxX = cPos.left + cWidth - bWidth;

此时，您将允许每个图像的顶部移动到容器的高度-此较小的校正意味着您将移动到容器的高度减去对象的高度

在fiddle中，这仍然包括（+填充，但这在您的示例中不是必需的），但是出于某种原因，您已经在代码中删除了它们

我还没有看到一个红色的盒子从灰色的盒子里移出来。当你增加什么的时候？它们在小提琴上看起来很好。哦，对不起，但我补充说它仍然在右下角的盒子里。