Question

我使用这个jQuery小提琴 http://jsfiddle.net/BREvn/5/

我正在制作一个鸟类射击游戏，在每个级别的鸟类增加，这只是这些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>

Answer 1

您删除了一个重要元素

maxY = cHeight;
maxX = cWidth;

这应该是

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

目前你允许每个图像的TOP移动到容器的高度 - 这个小的修正意味着你将到达容器的高度减去对象的高度

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

使用jquery随机移动多个div

1 个答案: