Кодировка HTML | Демо-сайт CMS uCoz | Почта

JavaScript: программируем жесты мышкой

Бесплатные и интересные решения для сайтов.
Правила форума
1. Темы с названиями Помогите, Как сделать, Хелп, Не могу найти и так далее будут перенесении в мусорку без предупреждения!
2. Любой транс-лит будет удален, так что подумайте стоит ли писать транс-литом.
3. Темы не по тематике этого раздела будут также перенесены в мусорку. (Например по DLE, phpBB, php скриптам и так далее...)
4. Не забываем про Общие правила форума!
Внимание: В этом разделе можно оставлять только готовые скрипты, для вопросов есть раздел Общение!!! :evil: Иначе, получите предупреждение, а потом бан :D .

JavaScript: программируем жесты мышкой

Сообщение Zeppter » 05 апр 2009, 21:01

Изображение


Многие пользователи Opera и FireFox знают о существовании так называемых Mouse Gestures (для FF существует одноименный плагин https://addons.mozilla.org/en-US/firefox/addon/39) - жестов мышкой, на которые реагирует браузер выполняя различные действия (такие как открытия нового окна, закладки, назад, вперед и т.д. и т.п.), единственный недостаток данной фичи - нет взаимодействия с сайтом :( :

На данный момент библиотека понимает только 8 простеших жестов:

* Top - зажимаем кнопку мышки и ведем курсор вверх на 50-200 пикселей (по умолчанию) и отпускаем, смещение по оси X должно быть минимум в два раза меньше. чем по оси Y
* Bottom - ведем курсор вниз
* Left
* Right

И их производные

* Top-Left - смещение по осям X и Y не должно различаться более чем в два раза
* Top-Right
* Bottom-Left
* Bottom-Right

Для подключения библиотеки вам понадобиться добавить следующий код в вашу страниц:
Код: Выделить всё
<script src="javascript/navigation.js" type="text/javascript"></script>


Далее копируем следующий код:
Код: Выделить всё
<script language="JavaScript">
        // use jQuery for bind function to event
        $(document).mousedown(navigation.mousedown);
        $(document).mouseup(navigation.mouseup);

        // set params
        navigation.minX = 50;
        navigation.minY = 50;
        navigation.maxX = 300;
        navigation.maxY = 300;
       
        // callback functions
        navigation.TopLeft  = function (X,Y) {  };
        navigation.Top      = function (X,Y) {  };
        navigation.TopRight = function (X,Y) {  };
       
        navigation.Left     = function (X,Y) {  };
        navigation.Right    = function (X,Y) {  };
       
        navigation.BottomLeft  = function (X,Y) {  };
        navigation.Bottom      = function (X,Y) {  };
        navigation.BottomRight = function (X,Y) {  };
</script>


Это заготовка для наших “жестов”, первые две строчки необходимы для того, чтобы повесить на глобальные события mousedown и mouseup наши две функции (используется бибилотека jQuery). Следующие 4 строчки указывают параметры жестов, т.е. лимиты в которых они будут срабатывать. Далее идет объявление 8 callback функций, в качестве параметров они принимают абсолютное смещение по оси X и Y.

Дабы исключить ложные срабатывания наших функций, лучше привязать их к нажатой клавиши “Ctrl” (код клавиши “Ctrl” равен 17, если хотите изменить - см. все коды на странице http://unixpapa.com/js/key.html ):

Код: Выделить всё
$(window).keydown(function(event){
          switch (event.keyCode) {
            case 17:           
                $(document).mousedown(navigation.mousedown);
                $(document).mouseup(navigation.mouseup);
                break;
          }
        });
       
        $(window).keyup(function(event){
          switch (event.keyCode) {
            case 17:
                $(document).unbind('mousedown');
                $(document).unbind('mouseup');
                break;
          }
        });


А вот так выглядит код из моего [url=примера]http://www.hohli.com/navigation/[/url]:

Код: Выделить всё
function mouseGestures(){
       
        $(window).keydown(function(event){
          switch (event.keyCode) {
            // ...
            // different keys do different things
            // Different browsers provide different codes
            // see here for details: http://unixpapa.com/js/key.html   
            // ...
            case 17:           
                $(document).mousedown(navigation.mousedown);
                $(document).mouseup(navigation.mouseup);
                break;
          }
        });
       
        $(window).keyup(function(event){
          switch (event.keyCode) {
            case 17:
                $(document).unbind('mousedown');
                $(document).unbind('mouseup');
                break;
          }
        });

        navigation.maxX = 300;
        navigation.maxY = 300;
       
        navigation.TopLeft  = function (X,Y) { select($('div#left div.top'),Math.abs(X-Y)) };
        navigation.Top      = function (X,Y) { select($('div#center div.top'),Y) };
        navigation.TopRight = function (X,Y) { select($('div#right div.top'),Math.abs(X-Y)) };
       
        navigation.Left     = function (X,Y) { select($('div#left div.middle'),X) };
        navigation.Right    = function (X,Y) { select($('div#right div.middle'),X) };
       
        navigation.BottomLeft  = function (X,Y) { select($('div#left div.bottom'),Math.abs(X-Y)) };
        navigation.Bottom      = function (X,Y) { select($('div#center div.bottom'),Y) };
        navigation.BottomRight = function (X,Y) { select($('div#right div.bottom'),Math.abs(X-Y)) };
       
    }
   
    function select(el,k) {
       
        var speed = 1500;
       
        switch (true) {
            case (k<50):
                speed = 500;
                break;
            case (k<100):
                speed = 1000;
                break;
            case (k<150):
                speed = 1500;
                break;
            case (k<200):
                speed = 2000;
                break;
            case (k>=200):
                speed = 2500;
                break;
        }
        el.animate({
                opacity: 0.4,
                backgroundColor: '#ffff00'
              }, speed, "linear",
              function () {
                  el.animate({
                    opacity: 1,
                    backgroundColor: '#fffff'
                  }, speed)
              });
    }


Как-то все запутанно, давайте лучше попробуем, как это всё работает (зажимаем “Ctrl” и пробуем активировать событие - кликаем на любой области, и удерживая клавишу мышки перемещаем курсор на 50-300 пикселей в желаемом направлении)…

Чуть-чуть еще прокомментирую функцию select, в качестве первого параметра она принимает элемент DOM’a который мы будем анимировать, второй параметр - коэффициент, от него будет зависеть скорость анимации, коэффициент представляет собой величину перемещения по интересующей нас оси (или разницу между оными)…

Зачем это все на сайте? Как по мне будет достаточно удобно, если повесить на события Left и Right переход на предыдущую/следующую страницу в форуме, на событие Top - вернуться на главную или в начало страницы, так вполне может пригодиться…
Аватара пользователя
Zeppter
Генерал-лейтенант
Генерал-лейтенант
 
Автор темы
Сообщения: 1025
Возраст: 27
Зарегистрирован: 08 авг 2008, 22:38
Карма: + 3 -
Откуда: MELITOPOL

Вернуться в Скрипты и интересные решения

Кто сейчас на конференции

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1

cron