Изображение Fly off Screen с использованием jQuery - PullRequest
Новая
       10

Изображение Fly off Screen с использованием jQuery

0 голосов
/ 29 февраля 2020

Я пытаюсь заставить изображение летать по экрану один раз, а затем остановиться. Я могу заставить его работать в al oop, но это отвлекает, поэтому я хочу, чтобы он запускался только один раз. Кто-нибудь знает как? (Я должен использовать jQuery)

Это то, что я имею до сих пор, но я хочу, чтобы он запускался только один раз, а не в oop: 

var speedX = 20;
var speedY = 1;

setInterval(function() {
  var newLeft = $("img#bee").position().left + speedX + "px";
  var newTop = $("img#bee").position().top + speedY + "px";

  $("img#bee").css({
    left: newLeft,
    top: newTop
  });
  if ($("img#bee").position().left > $(window).width()) {
    $("img#bee").css({
      left: "0px"
    });
  }

  if ($("img#bee").position().left < 0) {
    $("img#bee").css({
      left: $(window).width() + "px"
    });
  }

  if ($("img#bee").position().top > $(window).height()) {
    $("img#bee").css({
      top: $(window).height() + "px"
    });
  }
  $(".stop-btn").click(function() {
    $("img#bee").stop();
  });

}, 20);
#bee { display:inline-block; position:absolute }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="bee"  src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1417678932/jgbmipdnqptqxbig3ywz.jpg" />

Ответы [ 2 ]

0 голосов
/ 29 февраля 2020

это может быть не лучшим решением, но оно будет работать. Просто добавьте переход к нему в CSS, а затем измените css с помощью javascript / jquery

Javascript: 

 $(".nameOfElement").click(function() {
    $("#elementID").css({'right' : '0px'});
 });

HTML

<div id="elementID">Div content</div>

CSS

#elementID {
  position: absolute;
  left: 0px;
  transition: right 1500ms; //time to take to fly accros the screen
}
0 голосов
/ 29 февраля 2020

Удаление этого условия if ($("img#bee").position().left > $(window).width()) гарантирует, что положение изображения после прохождения ширины экрана не должно быть установлено обратно в 0px, поэтому избегайте зацикливания. 

var speedX = 20;
var speedY = 1;

setInterval(function() {
  var newLeft = $("img#bee").position().left + speedX + "px";
  var newTop = $("img#bee").position().top + speedY + "px";

  $("img#bee").css({
    left: newLeft,
    top: newTop
  });
 

  if ($("img#bee").position().left < 0) {
    $("img#bee").css({
      left: $(window).width() + "px"
    });
  }

  if ($("img#bee").position().top > $(window).height()) {
    $("img#bee").css({
      top: $(window).height() + "px"
    });
  }
  $(".stop-btn").click(function() {
    $("img#bee").stop();
  });

}, 20);
#bee { display:inline-block; position:absolute }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<img id="bee"  src="https://res-1.cloudinary.com/crunchbase-production/image/upload/c_lpad,h_256,w_256,f_auto,q_auto:eco/v1417678932/jgbmipdnqptqxbig3ywz.jpg" />
...