jquery-aim, 猜测用户将被悬停或者点击的元素的jQuery插件

分享于 

2分钟阅读

GitHub

  繁體 雙語
jQuery plugin which guesses which element user is going to be hovered/clicked.
  • 源代码名称:jquery-aim
  • 源代码网址:http://www.github.com/cihadturhan/jquery-aim
  • jquery-aim源代码文档
  • jquery-aim源代码下载
  • Git URL:
    git://www.github.com/cihadturhan/jquery-aim.git
    Git Clone代码到本地:
    git clone http://www.github.com/cihadturhan/jquery-aim
    Subversion代码到本地:
    $ svn co --depth empty http://www.github.com/cihadturhan/jquery-aim
    Checked out revision 1.
    $ cd repo
    $ svn up trunk
    
    jquery.aim

    jQuery插件期望哪个元素用户将悬停/点击。

    test

    示例

    可以找到几个示例示例页面

    用法

    调用元素上的函数捕捉用户目标,并添加一个在目标开始或者结束时添加或者删除的类

    $('#target').aim({
     className:'open'});

    如果要在aim开始或者结束时执行函数,请使用 aimEnteraimExit 选项

    $('#hamburger').aim({
     aimEnter:function() {
     $('#menu').show();
     },
     aimExit:function(){
     $('#menu').hide();
     }
    });

    命令行调试

    查看光标的瞄准位置,并检查光标是否与元素的使用相交

    $.aim.setDebug(true);

    你会看到一个 rectangle 在附近移动。

    定义自己的函数

    如果不喜欢默认算法,可以通过以下步骤定义自己的算法

    functionanticipateFunc(p, v, mouseX, mouseY, anticipator) {
     /* Calculate the new position of anticipator using inputs p = {x:number,y:number} v = {x:number,y:number} mouseX = number mouseY = number Anticipator has some readonly values like the following { size: 50, center: {x: 0, y: 0}, effectiveSize: 1, rect : {x0: 0, y0: 0, x1: 50, y1: 50} }*/}$.aim.setAnticipateFunction(anticipateFunc);