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

Тема в разделе "JavaScript", создана пользователем funnywheel, 18 фев 2014.

Модераторы: ZiX
  1. funnywheel

    funnywheel WordPress developer

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

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

    Как я вижу алгоритм скрипта -
    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();"
    но тут кучерявость ручек моих проявилась видимо, не запустилось счастье, пожалуй даже писать этот бредец не стану.

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

    NiceBro Создатель

    Регистр.:
    2 ноя 2012
    Сообщения:
    44
    Симпатии:
    25
    Как-то так
    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>
    
     
    Последнее редактирование: 18 фев 2014
  3. denkog

    denkog Писатель

    Регистр.:
    12 мар 2013
    Сообщения:
    8
    Симпатии:
    0
    <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(.........) - А как читай инструкцию
     
    Последнее редактирование: 18 фев 2014