Форум

Ivanishin · #1 (**permalink**) 29.01.2010, 17:10

Доброго времени суток! Прошу помощи с весьма непростым для меня вопросом.

Итак, есть <div></div> листинг ниже.

<div id="hall" class="hall_cont" style="margin: auto; background: transparent url(saal_img.jpg) no-repeat scroll 0% 0%; -moz-background-clip: border; -moz-background-origin: padding; -moz-background-inline-policy: continuous; width: 1242px; height: 952px; position: relative; top: 0px; left: 0px;"></div>

В итоге на странице отображается "часть" рисунка. Вот так.

Исходный рисунок, который идет на бекграунд в DIV вот.

Задача: как сделать и что использовать, чтобы происходил скрол бэкграунда в DIV при вождении указателя мышки по диву? То есть если мы будем вести мышку в диве направо - бэкраунд плавно "съезжает" тоже вправо. И как реагировать на скорость "ведения" курсора, чтобы скрол бэкраунда мог также менять свою скорость?

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

PepeL · #2 (**permalink**) 29.01.2010, 19:54

Диву присвой свойство overflow:hidden;
картику вложи в див, с position:absolute; и по событию onmousemove установленном на диве изменяй свойства left и top картинки

PeaceCoder · #3 (**permalink**) 30.01.2010, 02:16

Сообщение от PepeL

и по событию onmousemove установленном на диве изменяй свойства left и top картинки

зачем если можно изменять background-position ?
А скорость регулирется расстоянием от центра Div.

PepeL · #4 (**permalink**) 30.01.2010, 09:53

Цитата:

зачем если можно изменять background-position ?

можно и так )

Ivanishin · #5 (**permalink**) 30.01.2010, 13:59

То есть можно начать так?

<style type="text/css">
.hall_container{
  border: 2px #da251d dotted;
  overflow: hidden;
  width: 550px;
  height: 550px;
  position: relative;
  top: 0;
  left: 0;
  margin: auto;
  background: transparent url(hall.jpg) no-repeat scroll 0% 0%;}
</style>
<script language="javascript" type="text/javascript">
<!--
function scrollHall()
{

}
//-->
</script>
</head>

<body>

<div id="hall_container" class="hall_container" onmousemove="scrollHall()">/div>

</body>

PeaceCoder · #6 (**permalink**) 30.01.2010, 21:03

только

<div id="hall_container" class="hall_container" onmousemove="scrollHall(this)"></div>

что бы в функцию попадал элемент который надо сместить (что бы не выбирать его повторно)
осталось написать функцию.

Ivanishin · #7 (**permalink**) 31.01.2010, 22:31

Вопрос, как узнать координаты мыши относительно div id="hall_container" ?

Gozar · #8 (**permalink**) 31.01.2010, 23:25

Сообщение от Ivanishin

Вопрос, как узнать координаты мыши относительно div id="hall_container" ?

Вот формула: http://javascript.ru/blog/Andrej-Par...ta-na-stranice

+ вот тут показано как узнать координату мыши.

А дальше вычитаем из одного другое и получаем смещение по х и у относительно div id="hall_container"

ps: вчера не доглядел и написал пол решения, сегодня дописал

Ivanishin · #9 (**permalink**) 01.02.2010, 18:01

Gozar, спасибо очень помогло=)

Тут еще вопрос нарисовался к знатокам. Вот например кусок кода.

var tmp = document.getElementById('hall_container');
      tmp.style.top = ( tmp.style.top.replace ( 'px', '' ) - 1 ) + 'px';

Нормально попиксельно сдвигает див.

А вот этот

var tmp = document.getElementById('hall_container');
      tmp.style.top = ( tmp.style.top.replace ( 'px', '' ) + 1 ) + 'px';

Заставляет див сместиться на такое количество пикселей, что он сразу улетает очень далеко. Что не правильно, ведь разница в кодах только в знаке?

Мараторий · #10 (**permalink**) 01.02.2010, 18:10

tmp.style.top = ( parseInt(tmp.style.top) + 1 ) + 'px';

Форум

Справочник

Discord чат

Курсы javascript