资讯频道 → Web前端
阅读更多

15顶
0踩

Web前端

原创新闻 Moousture: 鼠标手势库

2009-06-08 12:29 by 副主编 zly06 评论(9) 有6779人浏览
浏览器 Mootools 活动

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Zohaib Sibt-e-Hassan创造了一个基于Mootools的鼠标手势库-Moousture ，通过简单的鼠标运动就能进行导航。它的目标是为鼠标手势制定一个框架，在任何浏览器中都能使用，包括现代的移动设备。


它的核心很简单：

  • probe（探针），定点设备。目前有Moousture.MouseProbe ；
  • monitor（监控器），测试probed device的传递间隔和Moousture事件通知的稳定性（onStable, onUnstable, onMove）；
  • Moousture的记录类，用于记录鼠标的活动并调用guesture对象进行传递。


使用超级简单：

// Create a guesture matcher, currently there are only two gesture objects Moousture.LevenMatcher, and Moousture.ReducedLevenMatcher.

gstr = new Moousture.ReducedLevenMatcher();

// Add gesture vectors to matcher object, (see details below in Create your own gestures).

gstr.addGesture([3,2,1,0,7,6,5,4], ccwCircle);

// Guesture callback function takes one parameter error recieved from matching algorithm. Threshold that value (if required) to make your gestures more sleek.

function ccwCircle(error) {
    if(error>= 0.6) return;
    ...
}

// Create a probe object that will probe the pointing device. Currently there is a mouse probe that take the $(element) to probe for. So passing a div id will cause the probe to trigger events only when they occur on the passed DOM element.
probe = new Moousture.MouseProbe($(document));

// Create a recoder object to record the movement , maxSteps and minSteps in options object will specify the maximum and minimum number of steps to be recorded, and macher is required matcher object to trigger the appropriate gesture.
recorder = new Moousture.Recorder({maxSteps: 20, minSteps: 8, matcher: gstr});

// Create a monitor specifying the interval to poll and the amount of error allowed for gesture in pixels.
monitor = new Moousture.Monitor(30, 2);

// Finally start the monitor.
monitor.start(probe, recorder);

// You can stop the gesture triggering any time by calling .stop() of monitor object.
monitor.stop();
 

 

  • 大小: 69.4 KB
来自: ajaxian
15
顶
0
踩
评论 共 9 条 请登录后发表评论
9 楼 ansjsun 2009-06-09 20:17
[b][/b]function ccwCircle(error) {  
12.    if(error>= 0.6) return;  
13.    ...   ?
14.}   这段能运行么
8 楼 yoyozizou 2009-06-09 19:42
同浏览器手势冲突...
7 楼 night_stalker 2009-06-09 10:11
题外：早在 05 年，wow 就有鼠标手势插件了……
6 楼 flyfan 2009-06-09 10:09
一直在用鼠标手势，太方便了，现在浏览器不支持鼠标手势的基本是淘汰了
5 楼 xingqiliudehuanghun 2009-06-09 09:58
厉害，我想不到也写不来
4 楼 Ivan_Pig 2009-06-09 09:16
不好意思，不按键也可以的。
有点不习惯~~~~~用鼠标不按键。。。。
3 楼 Ivan_Pig 2009-06-09 09:14
感觉有个不足~~~
如果用鼠标左键，则会选择文字。
如果用鼠标右键，则会弹出菜单。
所以使用手势库的话，至少要屏蔽掉鼠标右键。。。。
2 楼 whaosoft 2009-06-09 08:56
as 写的
'??
1 楼 night_stalker 2009-06-08 12:48
只有 300 多行，还包括注释，相当简单。

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • Tmake 很好用的Makefile生成工具

    Linux下编译工具，很好用的Makefile生成工具，可以自动生成Makefile非常方便，只要用progen生成.pro文件，或者自己手动编写一个.pro文件，就可以轻松生成适合目标系统的Makefile，因此也适用于交叉编译使用

  • qmake和tmake的区别

    在qte3以前，还分qmake和tmake，它们都是用来生成makefile的，它们的区别是：        qmake一般用于生成本地makefile。        例如：hello目录下有main.cpp hello.cpp hello.h cd hello qmake -project // 将生成hello.pro qmake hello.pro -o makefile

  • Tmake：通过非常简单的模板格式自动创建Makefile-开源

    tmake是一种工具，可以通过非常简单的模板格式自动创建Makefile，IDE项目文件（甚至可能还有autoconf文件！）。

  • DAPlink基础: progen的python环境配置

    DAPlink源码学习，virtualenv，twine

  • tmake学习笔记

    最初接触tmake，是因为改别人的东西，到手的代码是qt2的，用tmake生成的Makefile。平台搭建、qt编译、环境变量设置，都是参照arm学习板提供的指导手册一步一步傻瓜式地完成的。tmake的基本使用方法一开始是别人教的，但也就教了2个命令：先用progen -o xxx.pro生成工程文件，然后用tmake xxx.pro -o Makefile生成Makefile。使用期间碰到了很多

  • Qt 嵌入式图形开发

    Qt 嵌入式图形开发（入门篇）一、Qt/Embedded 开发环境的安装一般来说，居于Qt/Embedded开发的应用程序最终会发布到安装有嵌入式Linux操作系统的小型设备上，所以使用装有Linux操作系统的PC机或者工作站来完成Qt/Embedded开发当然是最理想的环境，尽管Qt/Embedded也可以安装在Unix和Windows系统上。下面我们将介绍如何在一台装有Linux操

  • tmake-1.11.tar.gz

    在linux环境下我们需要编译qt/embedded的工具，tmake类似于linux下针对PC机的qmake

  • tmake-1.8.zip（含progen）

    自动生成.pro \makefile的工具

  • QTE2.3.10、QTX11-2.3.2、TMAKE-1.13install及问题总结

    环境：red hat enterprise linux 5（虚拟机）     在 Trolltech公司的网站上可以下载该公司所提供的Qt/Embedded的免费版本,安装产品光盘以后，本次实验目录下已有要下载的文件，在/arm2410cl/gui/Qt/src下。在做实验前把本次实验用到的三个文件拷贝到/root/2410clQt 目录下。   [root@BC root]#cd /

  • DAPlink基础2: progen的使用

    【代码】DAPlink基础2: progen的使用。

  • _makpath() 和 _tsplitpath() 详解

    _makepath( _out string strBuf,                     _in string driver,                     _in string directy,                     _in string filename,                     _in string exten

  • QT安装

    安装:1.建立本机QTOPIA虚拟平台 软件:  tmake-1.11.tar.gz          //编译工具,如progen与tmake      qtopia-free-1.7.0.tar.gz      //QTE的桌面环境程序      qt-embedded-2.3.7.tar.gz   //提供qte的库      qt-x11-2.3.2.tar.gz           

  • _makepath和_makepath的使用案例

    _splitpath,生成路径；_makepath ，分解路径 #include    #include    int main(void)    {        char path_buffer[_MAX_PATH];        char drive[

  • tmake使用指南

    tmake使用指南,详细介绍了tmake的功能特征

  • 工具包下载地址

    刷价工具刷机 驱动程序 工具包 mtk 联发科

  • 拆开路径得到盘符、文件夹、文件名和扩展名的方法

    当你拿到一个文件路径的字符串（比如这种：“C:\Windows\notepad.exe”），然后你应该如何处理才能快速获取到它的盘符、文件夹、文件名和文件扩展名呢？（比如你分别获取到“C:”、“\Windows\”、“notepad”、“exe”四个字符串） 当然是使用_splitpath函数了。 _splitpath函数原型： void _splitpath(const char*path,ch...

  • linux安装make

    wget http://ftp.gnu.org/gnu/make/make-4.2.tar.gz tar -zxvf make-4.2.tar.gz cd make-4.2 ./configure make make install ln -s -f /usr/local/bin/make /usr/bin/make

Global site tag (gtag.js) - Google Analytics