Медленное перемещение изображения

#javascript #jquery #html #image

#javascript #jquery #HTML #изображение

Вопрос:

У меня есть изображение воздушного шара. Мне нужно, чтобы оно случайным образом перемещалось по моей странице (оно немного маленькое). Мне это нужно только для того, чтобы перемещаться в верхней половине моей страницы. Я нашел следующий код:

 $("#Friends").animate({ 
        top: "-=30px",
      }, duration );

Но я не уверен, как я мог бы зациклить это и заставить его перемещаться как по оси x, так и по оси y. Спасибо, если можете! У меня действительно включен jQuery 🙂

Ответ №1:

Как насчет чего-то подобного?… ЖИВАЯ СКРИПКА

HTML

 <img src="http://www.birdsnways.com/imgs/blbd48rt.gif" id="picture" />

CSS

 #picture{
    position:absolute;   
}

 doNextPoint();

function doNextPoint(){

    var maxX = $(window).width() - $('#picture').width();    
    var newX = rand(0, maxX);    
    var maxY = ($(window).height()/2) - $('#picture').height();
    var newY = rand(0, maxY);
    var speed  = rand (1000, 3000);

    $('#picture').animate({
        'top': newY   'px',
        'left': newX   'px' 
    }, speed, function(){
        doNextPoint();    
    });
}


function rand (min, max) {
     return Math.floor(Math.random() * (max - min   1))   min;
}

1. Хорошая работа по выполнению задачи до конца.

2. 1 Это лучше, чем принятый в настоящее время ответ, поскольку он разумно учитывает размеры экрана.

3. И я только что понял, что это было опубликовано за 5 минут до того, как я опубликовал свой ответ, и они выглядят очень похожими! Я чувствую себя плохо : (

Ответ №2:

CSS

 #friends { position: absolute; }

Разметка

 <img src="http://jsfiddle.net/img/logo.png" 
id="friends"/>

 function moveit() {

    var newTop = Math.floor(Math.random()*350);
    var newLeft = Math.floor(Math.random()*1024);
    var newDuration = Math.floor(Math.random()*5000);

    $('#friends').animate({
      top: newTop,
      left: newLeft,
      }, newDuration, function() {
        moveit();
      });

}

$(document).ready(function() {
    moveit();
});

Живая демонстрация:
http://jsfiddle.net/W69s6/embedded/result /

Более обновленная живая демонстрация: http://jsfiddle.net/9cN4C /

(старая демонстрация устарела и имеет неработающую ссылку, однако код по-прежнему правильный, поэтому он оставлен для справки, а не для демонстрации)

1. @AlbertRenshaw — Спасибо за редактирование. Кажется, jsfiddle переместил свой логотип png в другой каталог.

2. Да, хаха, вот почему я использовал логотип Google на этот раз, он имеет тенденцию быть больше … постоянный? Хаха, хорошего дня:)

Ответ №3:

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

 var flying;
flying = function() {
    $("#Friends").animate({ 
        top: "-=30px",   // you'll need to change this
      },
      duration,
      flying
    );
}
flying();

Как есть, оно будет просто продолжать подниматься вверх, потому что анимация всегда настроена на увеличение на 30 пикселей. Вам придется изменить функцию перемещения, чтобы немного рандомизировать движения. Для большей реалистичности сохраните предыдущее движение и просто измените его немного (небольшое ускорение), чтобы не было очень резких движений.

Ответ №4:

Чтобы выполнить цикл: используйте setTimeout:https://developer.mozilla.org/en/window.setTimeout

Для оси x используйте свойство CSS слева: (вверху: получите ось y)