Вертикальный скролл по mouseover
Делаю вертикально скроллящееся меню по типу вот этого:
http://www.netpro.ru/?action=DABlank2 (откройте "Мы сделали") , только на javaScript + jQuery HTML: <div id="left_list"> <p class="project_number"><a href="#">007</a></p> <p class="project_number"><a href="#">012</a></p> ... <p class="project_number"><a href="#">186</a></p> </div> javascript: $(document).ready(function(){ // При наведении на левый блок var winHeight = $(window).height(); var margin = $('#left_list').height() - winHeight; // движение при попадании курсора в области $('#left_list').unbind('mouseover').mouseover(function(e){ // top 1/3 if (e.pageY < (winHeight / 3)) { var speed = (winHeight / 6) / e.pageY; if (speed > 2) speed = 2; $('#direction').val('top'); } // bottom 1/3 if (e.pageY > 2 * (winHeight / 3)) { var speed = (e.pageY - ((2 / 3) * winHeight)) / (winHeight / 6) + 0.5; if (speed > 2) speed = 2; $('#direction').val('bottom'); } $('#speed').val(speed); var direction = $('#direction').val(); var speed = $('#speed').val(); //setInterval(function(){ // bottom 1/3, list moves top if (direction == 'bottom') { if (parseInt($('#left_list').css('margin-top')) > (-1) * margin) { $('#left_list').animate({marginTop: '-=50px'}, (300 / speed)); $('#int').val(parseInt($('#left_list').css('margin-top'))); } else { $('#left_list').animate({marginTop: '-' + margin + 'px'}, (300 / speed)); $('#int').val(parseInt($('#left_list').css('margin-top'))); } } // top 1/3, list moves bottom if (direction == 'top') { if ((parseInt($('#left_list').css('margin-top'))) < 0) { $('#left_list').animate({marginTop: '+=50px'}, (300 / speed)); $('#int').val(parseInt($('#left_list').css('margin-top'))); } else { $('#left_list').animate({marginTop: '0px'}, (300 / speed)); $('#int').val(parseInt($('#left_list').css('margin-top'))); } } // стопим, если увели мышь в середину if (direction == 'none') { $('#left_list').stop(); //clearInterval(); } }); // остановка при выведении указателя за пределы $('#left_list').unbind('mouseout').mouseout(function(){ $('#speed').val('0'); $('#direction').val('none'); $('#left_list').stop(); }); // увеличение номера при наведении $('#left_list > p.project_number').hover( function() { $(this).animate({fontSize: '10pt'}, 150); }, function(){ $(this).animate({fontSize: '8pt'}, 150); } ); }); Суть проблемы: Во всем, кроме ФайрФокса, блок прокручивается именно при движении мыши, а при простое на месте тоже останавливается. Надо, естественно, чтобы везде просто при поднесении мыши к краю списка, он бы скроллился. Пробовал сделать через setInterval, но это страшно тормозит скрипт, нет ли очевидного и грамотного способа реализовать это? Спасибо. |
используйте метод mousemove
|
Изначально с mousemove'ом и писал, все работает, но появляется другая проблема - блок не останавливается при выведении из области, ведь mousemove возникает именно при начале движения курсора, как тогда его грамотно стопить?
Это, даже, в теории так. На практике и такая логика не прослеживается, просто реакция на движения мыши становится непредсказуемой. |
Есть событие onmouseout, используйте его для случая когда мыша выходит за пределы списка
|
Ну естественно, на область со списком. Вот даже конкретно на этот блок:
$('#left_list') |
Часовой пояс GMT +3, время: 13:05. |