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

百度图库鼠标效果

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

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

说说原理,首先是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页面: 仿百度图库鼠标效果