Question

如何才能使该块只能在父级中移动？

现在它可以移出父母，即#border。

Ty的帮助。

Jquery的

$(document).ready(function () 
{
    $(document).on('keydown', function(e)
    {
        switch(e.which)
        {
            //Linkse toets
            case 37: $('#blokje').animate(
            {
                left: '-=100px'
            },1000);
            break;


            //Rechtse toets
            case 39: $('#blokje').animate(
            {
                left: '+=100px'
            },1000);
            break;

            //Onder toets
            case 40: $('#blokje').animate(
            {
                top: '+=100px'
            },1000);
            break;

            //Boven toets
            case 38: $('#blokje').animate(
            {
                top: '-=100px'
            },1000);
            break;
        }
    });
});

HTML

<!DOCTYPE html>

<html lang="en">
    <head>
        <meta charset="utf-8" />
        <title>Blokje</title>
            <link href="style.css" rel="stylesheet">
            <script src="_js/jquery-1.7.2.min.js"></script>
            <script src="script.js"></script>
    </head>
    <body>
        <h2>Gebruik de pijltoetsen om het kader te verplaatsen</h2>
        <div id="border">
            <div id="blokje"></div>
        </div>

    </body>
</html>

CSS

#blokje 
{
    width: 100px;
    height: 100px;

    position: relative;
    background-color: #FFFF99;
}

#border {
    width: 1000px;
    height: 600px;
    border: 1px solid black;
}

Answer 1

您可以使用jQuery的position()方法。

首先，将#border的css规则更改为包含position: relative;这样您就可以将子元素 relative 的位置设置为父级。

现在在你的jQuery中，你需要存储块的当前位置：

var blockPos = $('#blokje').position();//returns an object with the top and left positions

现在只需要检查块是否在边框内：

//check top - when the block is going up
if(blockPos.top > 0){
  //animate block
}

//check left - when the block is going left
if(blockPos.left > 0){
  //animate block
}

//check bottom - when the block is going down
if((blockPos.top + $('#blokje').height()) < $('#border').height()){
  //animate block
}

//check right - when the block is going right
if((blockPos.left + $('#blokje').width()) < $('#border').width()){
  //animate block
}

working JSFiddle

只是一个额外的注释：
当您使用keydown作为事件时，按下该键时将执行块位置;因此，如果在按下按键时块在边框内，即使它越过边界，它也会继续动画。

因此，最好使用keyup代替。但是，这会限制您每按一次一次动作，我不确定这是否是您想要的。

仅使块在border / child和parent动画中移动

1 个答案: