Нужна помощь с детским скриптом (обработчик onmouseover, вызов функции)

funnywheel

PHP & JS
Регистрация
6 Авг 2010
Сообщения
255
Реакции
219
В кодинге почти не рублю, от этого все беды, нужна помощь в реализации (по идее) простенькой затеи.

Суть затеи - есть некая меню, под которой подложен фон. При наведении на пункт меню, фон должен анимированно поехать на этот самый пункт меню.
Фон абсолютно позиционирован внутри контейнера менюшки.

Как я вижу алгоритм скрипта -
1) Наведение мышки на элемент - срабатывает обработчик onmouseover и вызывает функцию
2) Функция меняет значение css для span'a (left: XXpx; )
3) transition-duration обеспечивает анимацию
4) убираем мышку, срабатывает обработчик onmouseout, вызывает функцию аналогичную предыдущей, восстанавливает значение left на исходное

Есть следующая структура HTML(упрощенный вариант)

HTML:
<div class="container">
   <span id="target"></span>
   <a>Link1</a>
   <a>Link2</a>
   <a>Link3</a>
   <a>Link4</a>
</div>

<style>
.container {
   position: relative;
}
#span {
   background: url(../images/bg.png);
   display: block; 
   height: 85px; 
   left: -5px; 
   position: absolute; 
   top: 0; 
   transition-duration: 0.2s;
   z-index: -1;
}
</style>

Что попробовал:
Просто в обработчике написать
Код:
<a href="#" onmouseover='getElementById("target").style="left:125px;"' onmouseout='getElementById("target").style="left:-5px;"'>link</a>

В Firefox и Opera 12 как часы, Opera Next, IE, Chrome - ноль внимания.

Пробовал в отдельном JS файле создать функцию и вызвать ее обработчиком
Код:
onmouseover="function();"
но тут кучерявость ручек моих проявилась видимо, не запустилось счастье, пожалуй даже писать этот бредец не стану.

Хелп ми плиз с рабочей реализацией этой штуки :(
 
Как-то так
HTML:
<style>
.container {
    width:400px;
    border:1px solid black;
    margin:0 auto;
    padding:0;
    list-style-type:none;
    overflow: hidden;
    position: relative;
}

.container a {
    padding: 0 20px;
    line-height: 40px;
    text-decoration:none;
}

.cover {
    background: url('http://placehold.it/100x100');
    height: 40px;
    width: 85px;
    position:absolute;
    left:-85px;
    top:0;
    transition-duration: 0.2s;
    z-index: -1;
}
</style>
<body>
<div class="container">
   <div class="cover"></div>
   <a>Link1</a>
   <a>Link2</a>
   <a>Link3</a>
   <a>Link4</a>
   <a>Link5</a>
</div>
<script>
var cover = document.querySelector('.cover');
var nav = document.querySelectorAll('.container a');

for (var i = 0; i < nav.length; i++) {
    nav[i].addEventListener('mouseover', function(){
    cover.style.left = this.offsetLeft + 'px';
    } );
}
</script>
 
Последнее редактирование:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#myLink").mouseenter(function(){
jQuery(".target").toggleClass("targetAnim");​
}).mouseleave(function(){
jQuery(".target").toggleClass("targetAnim");​
});​
});​
</script>
<style>
.container {
position: relative;​
}
.target {
background: url(bg.png);
display: block;
height: 85px;
width: 85px;
left:0px;
position: absolute;
-webkit-transition-duration: 2s;
-o-transition-duration: 2s;
-moz-transition-duration: 2s;
transition-duration: 2s;​
}
.targetAnim {
left: 105px;​
}​
</style>
</head>
<body>
<div class="container">
<span class="target"></span>
<br><br><br><br><br><br>
<a href="#" id="myLink">Link1</a>​
</div>​
</body>
</html>

Если хочиш событие повестить на все линки то нужно использовать функцию jQuery("#myLink").each(.........) - А как читай инструкцию
 
Последнее редактирование:
Назад
Сверху