Javascript-форум (https://javascript.ru/forum/)
-   Элементы интерфейса (https://javascript.ru/forum/dom-window/)
-   -   Фон в виде карты и плавное позиционирование (https://javascript.ru/forum/dom-window/35573-fon-v-vide-karty-i-plavnoe-pozicionirovanie.html)

Сергей О. 15.02.2013 01:21

Фон в виде карты и плавное позиционирование
 
Добрый вечер, уважаемые гуру.
Есть зада, и я прошу Вашей помощи.

Задача вот какая:
1. Есть большое изображение размером 2000 на 1500 px;
2. На нём должны быть размещены другие изображения, т.е. спозиционированны абсолютно.
3. Большое изображение должно плавно менять позицию, так, чтобы размещённые на нём элементы оставались на своих позициях.
(Т.е. случайным образом генерируются координаты и плавно переходит к этим координатам, ждёт там 2-3 секунды и повторяется всё заново)

Я пытаюсь сделать это при помощи iframe. В iframe загружаю страницу, которая содержит это большое изображение, вернее div у которого фон указан, как это большое изображение. Там я позиционирую другие точки.
Сам iframe я сделал размером 500 на 300 и пытаюсь с помощью скроллов управлять позиционированием, но что-то не очень выходи.

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

Спасибо!

danik.js 15.02.2013 02:38

Цитата:

Сообщение от Сергей О.
Я пытаюсь сделать это при помощи iframe

Ну зачем же забивать гвозди микроскопом? Есть же молоточек :)
<style>
.container{
    overflow: scroll;
    width: 100%;
    max-height: 100%;
}
.content{
    width: 10000px;
    height: 1000px;
}
</style>
<div class="container">
    <div class="content"></div>
</div>

danik.js 15.02.2013 02:41

Сергей О., вам нужно копать в сторону css:
position: absolute
overflow: hidden
left, right

Для анимации проще всего использовать jQuery

Deff 15.02.2013 02:44

Цитата:

Сообщение от Сергей О.
Я пытаюсь сделать это при помощи iframe. В iframe

Смысл ?
Оберните картинку в два div(а), первый с position:relative; (Этот div будет обрамлением для абсолютно спозиционированных точек на карте.
А всё вместе оберните в <div style="overflow:hidden;width:XXpx;height:YYpx"> этот div будет окном, относительно которого позиционируете второй div
Фрейм уг, там всё будет в пять раз медленнее и прерываться на рендинг главной

Сергей О. 15.02.2013 09:25

Ребят, спасибо за столь оперативные ответы.
Есть плавные переходы, координаты генерируются случайным образом, но всё таки есть ещё вопрос:

Вопрос:
Почему скорость переходы от точки к точке не фиксированная, а то один раз очень быстро, другой раз еле-еле перемещается.

Вот, что у меня получилось:

<script src="jquery.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>

<script>
function getRandomInt(min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}

var x = 0;
var y = 0;
var n_top = 0;
var n_left = 0;
function moveMap()
{
x = getRandomInt(0, 1000);
y = getRandomInt(0, 1500);

$('#map').stop().animate({
scrollTop: y,
scrollLeft: x
}, 15000, 'easeOutCubic')
}
setInterval('moveMap()', 4000);
</script>

<div id="map" style="width:500px;height:300px;overflow:hidden;bo rder:1px solid #adadad">
<div style="background:url(photo.jpg);width:1000px;heig ht:1500px;"></div>
</div>

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

Спасибо!

danik.js 15.02.2013 10:46

Цитата:

Сообщение от Сергей О.
можно это сделать как-то без скроллов

Так ведь уже было сказано:
Цитата:

Сообщение от danik.js
position: absolute
overflow: hidden
left, right

Цитата:

Сообщение от Deff
Оберните картинку в два div(а), первый с position:relative; (Этот div будет обрамлением для абсолютно спозиционированных точек на карте.
А всё вместе оберните в <div style="overflow:hidden;width:XXpx;height:YYpx"> этот div будет окном, относительно которого позиционируете второй div

Цитата:

Сообщение от Сергей О.
И почему скорость меняется

Потому что время одно (15000), а расстояние - разное.


Часовой пояс GMT +3, время: 07:44.