изменение позиции фона одного 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 { Помогите, плиз : ) |
Реализовал так, но не могу заставить двигаться фон все время пока мышь на нашем блоке... работает, только если постоянно подводить/уводить мышь... как исправить?
<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()"> |
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> |
рони, спасибо большое, работает на ура!
|
Часовой пояс GMT +3, время: 16:10. |