Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 05.02.2012, 18:15
Новичок на форуме
Отправить личное сообщение для desir Посмотреть профиль Найти все сообщения от desir
 
Регистрация: 05.02.2012
Сообщений: 3

изменение позиции фона одного div пока мышь находится на ссылке
Увы, в яваскрипт я не силен, пробовал разные способы, но так ничего не наковырял.

Изначально у меня есть:

в HTML:

<div id="header">
    <div id="headercontent">
        <a id="buildings">главная</a>
        <div id="tel">
        <span>8 (495)</span> 000-00-00 <a href="#">контакты</a>
        </div>
        <div id="text">
        <a href="#">» о компании</a>
        </div>
	</div><!-- #headercontent-->
</div><!-- #header-->

в CSS:

Код:
#header {
	background: #c4dcf8 url(images/bg_header.jpg) repeat-x 0px;
}
И я так и не смог реализовать фишку, чтоб пока мышь находится на buildings, фон header смещался.

Помогите, плиз : )
Ответить с цитированием
  #2 (permalink)  
Старый 05.02.2012, 20:14
Новичок на форуме
Отправить личное сообщение для desir Посмотреть профиль Найти все сообщения от desir
 
Регистрация: 05.02.2012
Сообщений: 3

Реализовал так, но не могу заставить двигаться фон все время пока мышь на нашем блоке... работает, только если постоянно подводить/уводить мышь... как исправить?

<script language="JavaScript">
    var z = 0;
    var timerId;

    function movesky() {
    z = z + 1;
    document.getElementById("header").style.backgroundPosition = z + "px 0px";

    timerId = setInterval(moveskyf, 100);
    }

    function moveskybegin() {
    if (timerId) return;
    movesky();
    }

    function moveskyend() {
    clearTimeout(timerId);
    timerId = null;
    }
</script>


<div id="header" style="background-position: 0px 0px;" onMouseOver="moveskybegin()" onMouseOut="moveskyend()">
Ответить с цитированием
  #3 (permalink)  
Старый 05.02.2012, 21:35
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,086

desir,
Вариант...
<!DOCTYPE html>
<html>
<head>
  <title></title>
<style type="text/css">
.header {
   background: #c4dcf8 url(http://javascript.ru/forum/images/ca_serenity/misc/logo.gif)  no-repeat  right;

}
</style>
<script  type="text/javascript">
    var z = 0;
    var stop = true;

    function movesky() {
    z++;
    document.getElementById("header").style.backgroundPosition = z + "px 0px";
    if (stop) {timerId = window.setTimeout(movesky,100); }
    else stop = true
        }

</script>
</head>
<body>
<div id="header" class="header">
    <div id="headercontent">
        <a id="buildings" onmouseover="movesky()"    onmouseout="stop = false">главная</a>
        <div id="tel">
        <span>8 (495)</span> 000-00-00 <a href="#">контакты</a>
        </div>
        <div id="text">
        <a href="#">» о компании</a>
        </div>
	</div><!-- #headercontent-->
</div><!-- #header-->
</body>
</html>
Ответить с цитированием
  #4 (permalink)  
Старый 05.02.2012, 22:54
Новичок на форуме
Отправить личное сообщение для desir Посмотреть профиль Найти все сообщения от desir
 
Регистрация: 05.02.2012
Сообщений: 3

рони, спасибо большое, работает на ура!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск