或许你看到这个标题有些疑惑，没关系，首先来看一个地址。

百度图库鼠标效果

这个页面是百度图库列表，当我们鼠标移入图片时，会发现图片底部会显示其相关信息层，鼠标移出信息层隐藏，当然这里的主角不是鼠标移入移出信息层的显隐。那么主角是什么？

通过鼠标在图片间不断的移入移出，我们会注意到鼠标从上移入，则信息层会从上进入，鼠标向下移出，则信息层从下退出，左右方向也类似。于是我们可以知道信息层进入和退出的方向，是根据鼠标移入移出的方向来决定。那么这种效果如何实现？

说说原理，首先是html结构，元素的运动必须脱离文档流，假设hover为绝对定位的信息层，move为在hover里上下左右运动的层，move里面包含透明背景层bg和文字描述层des。示例图和html结构分别如下：

<li data-title="图片01">
　<img src="http://yi-jy.com/demo/images/pic.jpg">
　<div class="hover">
　　<p class="move">
　　　　<b class="bg"></b>
　　　　<span class="des"></span>
　　</p>
　</div>
</li>

鼠标移入时，在当前列表插入hover结构，鼠标移出时，当前列表移除整个hover结构。

然后是通过js判断鼠标方向，那么如何判断鼠标移入移出的方向呢？假设图片的宽和高分别为w 和 h，则有：

var w = $(this).width(); 
var h = $(this).height(); 
var x = (e.pageX - this.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1); 
var y = (e.pageY - this.offsetTop - (h / 2)) * (h > w ? (w / h) : 1); 
var direction = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
//判断方向direction的值分别为： 0 上，1 右 ，2 下，3 左

最后通过direction的值来执行相应的函数。

具体的demo页面： 仿百度图库鼠标效果