Управление жестами мыши
javascript, 15.07.2009 Среда, 21:03
Теги:
Теги:
Написал маленькую библиотечку дополнительных событий для javascript. Всего новых событий 5.
Первая новинка - mouseStop - событие, как это видно из названия, возникающее при остановке движения мыши. Считаю его очень полезным и нужным в быту.
Далее следуют достаточно интересный вариант отлова жестов мыши на странице, в данном случае отслеживание росчерков влево - mouseMoveLeft, вправо - mouseMoveRight, вверх - mouseMoveUp и вниз - mouseMoveDown.
События возникают как только мышь пройдет в заданную сторону по прямой (относительно прямой) линии установленное количество пикселей. В каждый момен перемещения мыши в скрипте автоматически выщитывается 3 контрольные точки, через которые должен пройти курсор. Никакие элементы дополнительно не создаются.
Скрипт кроссбраузерен и работает как в IE так и в нормальных браузерах. Посмотреть пример его работы можно ниже. Если вы (не нажимая кнопки мыши) проведете курсором ровно снизу вверх примерно на 200 пикселей, то цвет фона изменится на синий, так же визуализируются и другие направления:А вот сам скрипт в сжатом состоянии.В листинге наглядно показано, как создаются события. Жду комментариев.
Первая новинка - mouseStop - событие, как это видно из названия, возникающее при остановке движения мыши. Считаю его очень полезным и нужным в быту.
Далее следуют достаточно интересный вариант отлова жестов мыши на странице, в данном случае отслеживание росчерков влево - mouseMoveLeft, вправо - mouseMoveRight, вверх - mouseMoveUp и вниз - mouseMoveDown.
События возникают как только мышь пройдет в заданную сторону по прямой (относительно прямой) линии установленное количество пикселей. В каждый момен перемещения мыши в скрипте автоматически выщитывается 3 контрольные точки, через которые должен пройти курсор. Никакие элементы дополнительно не создаются.
Скрипт кроссбраузерен и работает как в IE так и в нормальных браузерах. Посмотреть пример его работы можно ниже. Если вы (не нажимая кнопки мыши) проведете курсором ровно снизу вверх примерно на 200 пикселей, то цвет фона изменится на синий, так же визуализируются и другие направления:А вот сам скрипт в сжатом состоянии.
Code
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Жесты мышкой</title></head>
<body>
<script>
/* Сам скрипт */
mouseMoveUp=function(a,b,c,d){moveCatch(a,b,0,-c,d)};mouseMoveDown=function(a,b,c,d){moveCatch(a,b,0,c,d)};mouseMoveLeft=function(a,b,c,d){moveCatch(a,b,-c,0,d)};mouseMoveRight=function(a,b,c,d){moveCatch(a,b,c,0,d)};mouseStop=function(a,b,c,d){moveCatch(a,b,0,0,0)};function moveCatch(b,c,x,y,d){var f,g,h,j,i,k,l,m,n,o,p,q,r,s;g=true;f=200;if(d<20){d=20}if(/*@cc_on!@*/false){b.attachEvent('onmousemove',function(){t(window.event)})}else{b.addEventListener('mousemove',function(a){t(a)},false)}function t(e){if(x!=0||y!=0){if(g){g=false;k=e.clientX;l=e.clientY;m=k+x/2;o=k+x;n=l+y/2;p=l+y}q=e.clientX;r=e.clientY;if(!g&&q<=m+d&&q>=m-d&&r<=n+d&&r>=n-d){h=true}if(!g&&q<=o+d&&q>=o-d&&r<=p+d&&r>=p-d){j=true}if(!g&&h&&j){h=false;j=false;g=true;c()}}else{s=true}clearTimeout(i);i=setTimeout(function(){h=false;j=false;g=true;if(s){c()}},f)}};
/* Пример использования */
mouseStop(document,function(){document.body.style.background='black'});
mouseMoveUp(document,function(){document.body.style.background='blue'},200,30);
mouseMoveDown(document,function(){document.body.style.background='red'},200,30);
mouseMoveLeft(document,function(){document.body.style.background='green'},200,30);
mouseMoveRight(document,function(){document.body.style.background='yellow'},200,30);
</script>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>Жесты мышкой</title></head>
<body>
<script>
/* Сам скрипт */
mouseMoveUp=function(a,b,c,d){moveCatch(a,b,0,-c,d)};mouseMoveDown=function(a,b,c,d){moveCatch(a,b,0,c,d)};mouseMoveLeft=function(a,b,c,d){moveCatch(a,b,-c,0,d)};mouseMoveRight=function(a,b,c,d){moveCatch(a,b,c,0,d)};mouseStop=function(a,b,c,d){moveCatch(a,b,0,0,0)};function moveCatch(b,c,x,y,d){var f,g,h,j,i,k,l,m,n,o,p,q,r,s;g=true;f=200;if(d<20){d=20}if(/*@cc_on!@*/false){b.attachEvent('onmousemove',function(){t(window.event)})}else{b.addEventListener('mousemove',function(a){t(a)},false)}function t(e){if(x!=0||y!=0){if(g){g=false;k=e.clientX;l=e.clientY;m=k+x/2;o=k+x;n=l+y/2;p=l+y}q=e.clientX;r=e.clientY;if(!g&&q<=m+d&&q>=m-d&&r<=n+d&&r>=n-d){h=true}if(!g&&q<=o+d&&q>=o-d&&r<=p+d&&r>=p-d){j=true}if(!g&&h&&j){h=false;j=false;g=true;c()}}else{s=true}clearTimeout(i);i=setTimeout(function(){h=false;j=false;g=true;if(s){c()}},f)}};
/* Пример использования */
mouseStop(document,function(){document.body.style.background='black'});
mouseMoveUp(document,function(){document.body.style.background='blue'},200,30);
mouseMoveDown(document,function(){document.body.style.background='red'},200,30);
mouseMoveLeft(document,function(){document.body.style.background='green'},200,30);
mouseMoveRight(document,function(){document.body.style.background='yellow'},200,30);
</script>
</body>
</html>
№1
Aleko
[sayto]Scriptin[/sayto], но собственно вы меня процитировали более развернуто)