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

funnywheel · 18 Фев 2014

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

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

Как я вижу алгоритм скрипта -
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();"

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

Хелп ми плиз с рабочей реализацией этой штуки

NiceBro · 18 Фев 2014

Как-то так

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>

denkog · 18 Фев 2014

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>

</body>
</html>

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

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

funnywheel

PHP & JS

NiceBro

Создатель

denkog

Писатель