Изображение Javascript не останавливается на краю окна

Question

Изображение Javascript не останавливается на краю окна

0

Я пытаюсь переместить изображение с помощью клавиш со стрелками в Javascript и не позволять ему перемещаться с экрана. Код, похоже, работает для предотвращения левой стороны, но не справа. Вот мой код. Любые предложения будут полезны. Благодарю!!

<html>
    <head>
        <style>
            *{
                margin:0; 
                padding:0;
                overflow:hidden;
            }
            html, body{
                height: 100%;
                width: 100%;
                margin: 0;
            }
        </style>
    </head>
    <body onkeydown="checkKey();">
        <img id="player" src="left.gif" />

        <script type="text/javascript">
            var image = document.getElementById('player');

            image.style.left = '0px'; 
            image.style.position= 'relative'; 

            function checkKey(event){
                event = event || window.event;
                var keycode = event.charCode || event.keyCode;
                if(keycode === 39){
                    moveRight();
                }
                if(keycode === 37){
                    moveLeft();
                }
            }

            if (image.style.left < screen.width + 'px'){
                image.style.left = parseInt(image.style.left,10) + 10 + 'px';
            }

            function moveLeft(){
                if (image.style.left > 0 + 'px'){
                    image.style.left = parseInt(image.style.left, 10) - 10 + 'px';
                }
            }
        </script>
    </body>
</html>

user3054959 01 дек. 2013, в 19:32

Источник

2

Получите размер экрана и примените условие, если image.style.right должен быть меньше ширины экрана, а для левой стороны image.style.left должен быть больше 0
Shadow 01 дек. 2013, в 18:34
0

@shadow Спасибо за ответ, но когда я добавил это условие, изображение перестало двигаться на 20 пикселей.
user3054959 01 дек. 2013, в 18:44

Теги:

javascript

html

image

1 ответ

Ещё вопросы

Получите размер экрана и примените условие, если image.style.right должен быть меньше ширины экрана, а для левой стороны image.style.left должен быть больше 0
@shadow Спасибо за ответ, но когда я добавил это условие, изображение перестало двигаться на 20 пикселей.

Shadow · Accepted Answer · 2013-12-01T15-44-00.000Z

Попробуйте это | DEMO

var image;
window.onload=function(){
image = document.getElementById('player');
image.style.left = '0px'; 
image.style.position= 'relative';  
}

function checkKey(event)
{
  event = event || window.event;
  var keycode = event.charCode || event.keyCode;
  if(keycode === 39)
   {
    moveRight();
   }
  if(keycode === 37)
   {
    moveLeft();
   }
}

function moveLeft()
 {
   if (parseInt(image.style.left) > 0)
   {
    image.style.left = parseInt(image.style.left, 10) - 10 + 'px';
   }
 }
function moveRight()
 {
    var parentWidth = image.parentNode.offsetWidth;
   if (parseInt(image.style.left)+image.offsetWidth <parentWidth)
   {
    image.style.left = parseInt(image.style.left, 10) + 10 + 'px';
   }
 }