движущееся изображение слева направо javascript

0

Поэтому мне нужна помощь, мне нужно создать javascript файл (с соответствующим HTML), который позволяет перемещать изображение слева направо непрерывно. И затем, когда пользователь нажимает кнопку мыши, изображение должно непрерывно перемещаться вверх и вниз.

Я до сих пор пытался сделать первую часть, однако, используя код, я обнаружил, что он не работает для меня, и я не слишком уверен в этом. Я чувствую, что мне не хватает чего-то столь очевидного, но я не могу понять это.

Заранее спасибо.

Это мой код

HTML:

<html>
<head>
<title>Task 2</title>
<link rel="stylesheet" type="text/css" href="task2.css">
<script src="task2.js"></script>

<div id="animate">Sample</div>
</head>
</html>

CSS:

#animate {
    position: relative;
    border: 1px solid green;
    background: yellow;
    width: 100px;
    height: 100px;
}

JavaScript:

(document).ready(function() {
    var width = (document).width();

    function goRight() {
        ("#animate").animate({
        left: width
      }, 5000, function() {
         setTimeout(goLeft, 50);
      });
    }
    function goLeft() {
        ("#animate").animate({
        left: 0
      }, 5000, function() {
         setTimeout(goRight, 50);
      });
    }

    setTimeout(goRight, 50);
});
  • 1
    где jQuery $?
  • 0
    он не принимает их, консоль возвращается с неопределенным идентификатором или схожими ошибками, это потому, что я сохранил его как .js?
Показать ещё 3 комментария
Теги:
jquery-animate

1 ответ

2
Лучший ответ

Добавьте обработчик при щелчке по изображению и funcs to updown:

    function goUp() {
    $("#animate").animate({
    top: 0
  }, 5000, function() {
     setTimeout(goDown, 50);
  });
}
function goDown() {
    $("#animate").animate({
    top: height
  }, 5000, function() {
     setTimeout(goUp, 50);
  });
}
$("#animate").on('click',function(){$('#animate').stop();
              if(upleft == 0)
              {goDown(); upleft=1;}
                                else {goLeft();upleft=0}
})

FIDDLEEXAMPLE

Поделиться
  • 0
    большое спасибо!!
  • 0
    Я не уверен, почему, но функция щелчка не работает, она будет отлично работать в скрипке, но не тогда, когда я ее реализую?
Показать ещё 4 комментария

Ещё вопросы

Сообщество Overcoder
Наверх
Меню