Вертикальный скролл по 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, время: 07:51. |