猜哪个元素将被用户hover/点击的jQuery插件:jquery.aim

jopen 10年前

一个jQuery插件,它猜哪个元素将被用户悬停/点击。

demo.gif

示例

在线示例页面:examples page

用法

Call the function on the elements to catch user aim and add a class which will be added or removed when aiming starts or ends

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

If you want to execute a function on aim starts or ends, use the aimEnter and aimExit options

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

调试

To see where your cursor is aiming and check if it intersects with elements use

$.aim.setDebugMode(true);

and you will see a rectangle moving around.

定义自己的功能

If you don't like the default algorithm, define your own by the following procedure

function anticipateFunc(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);

项目主页:http://www.open-open.com/lib/view/home/1415322609340