js 拉勾网效果_类似hoverdir.js的一个效果 拉勾网首页的thumbs效果

$(function(){

$('#thumb li').mouseenter(function(ev){

var index=$(this).index();

var n=getN($('#thumb li'),ev,index);

var oSpan=$('#thumb li a');

switch (n)

{

case 0: // right

oSpan.eq(index).css({left:300,top:0})

break;

case 1: // bottom

oSpan.eq(index).css({left:0,top:300})

break;

case 2: // left

oSpan.eq(index).css({left:-300,top:0})

break;

case 3: // top

oSpan.eq(index).css({left:0,top:-300})

break;

}

oSpan.eq(index).stop().animate({top:0, left:0});

});

$('#thumb li').mouseleave(function(ev){

var index=$(this).index();

var n=getN($('#thumb li'),ev,index);

var oSpan=$('#thumb li a');

switch (n)

{

case 0: // right

oSpan.eq(index).stop().animate({top:0, left:300});

break;

case 1: // bottom

oSpan.eq(index).stop().animate({top:300, left:0});

break;

case 2: // left

oSpan.eq(index).stop().animate({top:0, left:-300});

break;

case 3: // top

oSpan.eq(index).stop().animate({top:-300, left:0});

break;

}

});

function getN(obj,ev,index)

{

var w=obj.eq(index).width();

var h=obj.eq(index).height();

var x=(obj.eq(index).offset().left+w/2-ev.clientX)* (w

> h ? (h / w) : 1);

var y=(obj.eq(index).offset().top+h/2-ev.clientY)* (h

> w ? (w / h) : 1);

var n=Math.round(((d2a(Math.atan2(y, x))+180)/90))%4;

return n;

}

//弧度转角度

function d2a(d)

{

return d*180/Math.PI;

}

});