Question

这是我使用箭头键移动太空船的代码，我需要阻止从页面范围移出这些元素（宇宙飞船）？

我的意思是当按下键时元素会向下移动我不需要请这是我的代码：

$(document).keydown(function(e){
    $("body").innerWidth()
    switch (e.which){
    case 37:    //left arrow key
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:    //up arrow key
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:    //right arrow key
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:    //bottom arrow key
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }

css：

.box{
    position: relative;
    top: 10px;
    width: 130px;
    height: 130px;
    position: relative;
    margin: 200px auto 0;
    background: url("http://davidpapp.com/wp-content/uploads/2015/05/rocket.png") ;
}

Answer 1

花一点时间来回顾一下脚本的逻辑。按下按钮时，无论页面上的位置如何，它都会移动对象。相反，您应该在执行实际移动之前包含一个条件来检查是否可以移动。

$(document).keydown(function(e){
    var width = $("body").innerWidth();//Assigned this value to a variable
    var height = $('body').height();//Created a variable for the height
    var $box = $('.box');//Because I hate typing this so many times
    var posX = parseFloat($box.css('left'));
    var posY = parseFloat($box.css('top'));
    switch (e.which) {
        case 37:    //left arrow key
            //Don't allow if moving to the left would cause it to go less than 0
            if(posX - 50 >= 0) {
                $box.finish().animate({
                    left: "-=50"
                });
            }
            break;
        case 38:    //up arrow key
            //Don't allow if moving up would cause it to go less than 0
            if(posY - 50 >= 0) {
                $box.finish().animate({
                    top: "-=50"
                });
            }
            break;
        case 39:    //right arrow key
            //Not only checking to make sure the origin doesn't go over the width
            //but also keep the width of the box in mind so it appears to stay within bounds
            if(posX + 50 + $box.width() <= width) {
                $box.finish().animate({
                    left: "+=50"
                });
            }
            break;
        case 40:    //bottom arrow key
            //Not only checking to make sure the origin doesn't go past the bottom line
            //but also keep the height of the box in mind so it appears to stay within bounds
            if(posY + 50 + $box.height() <= height) {
                $box.finish().animate({
                    top: "+=50"
                });
            }
            break;
    }
}

P.S。，我很快就写了这个，没有经过测试，所以如果我拼写错误或者标志低于标志并且标志大于混合，请不要感到惊讶，哈哈。无论如何，我希望你理解我试图传达的逻辑。

Answer 2

下面的代码显示了该怎么做。您可以通过

来调整数字

private void Login()
{
    MainVM = new ViewModel.MainWindowVM();
    _mainWindow = new RibbonMainWindow
    {
        DataContext = MainVM
    };

    //Prompt user for login.
#if UITEST
    _loggedIn = true;
    MainVM.LoadData();
#else
    var loginWindow = new Login();
    var login = new ViewModel.LoginVM();
    loginWindow.DataContext = login;
    loginWindow.ShowDialog();
    if (loginWindow.DialogResult != null) _loggedIn = loginWindow.DialogResult.Value;
#endif

    if (_loggedIn && MainVM.Loaded)
    {
        _mainWindow.ShowDialog();
    }
}

$(document).keydown(function(e){
    $("body").innerWidth()
    var width = window.innerWidth;
    var height = window.innerHeight;
    var offset = $(".box").offset();
    switch (e.which){
     case 37:
        if(offset.left>=50)
        $(".box").finish().animate({
            left: "-=50"
        });
        break;
    case 38:
        if(offset.top>=100)
        $(".box").finish().animate({
            top: "-=50"
        });
        break;
    case 39:    //right arrow key
        if(offset.left+130+50 < width)
        $(".box").finish().animate({
            left: "+=50"
        });
        break;
    case 40:    //bottom arrow key
      if(offset.top+50 < height)
        $(".box").finish().animate({
            top: "+=50"
        });
        break;
    }      
   
   })

body{

	}


	.box{
	    position: relative;
	    top: 10px;
	    width: 130px;
	    height: 130px;
	    position: relative;
	    margin: 200px auto 0;
	    background: url("http://davidpapp.com/wp-content/uploads/2015/05/rocket.png") ;
	}

在html中为元素创建边框块

2 个答案: