1、效果说明
在效果当中,当用户将鼠标移入一个块时,会从鼠标的移入方向滑入一个悬浮块,悬浮块会随着鼠标移出当前块,且滑出方向遵循鼠标的移出方向
2、实现原理分析
1、结构分析
由于悬浮层有可能从上下左右四个方向滑入目标块,因此需要先针对结构进行处理。
在此,可以通过两种方法实现“悬浮层”。
一种方法是为每个块定位四个悬浮块(上下左右),当满足鼠标移入的条件时,让相应的悬浮块滑入;
第二种方法是只为每个块定位一个悬浮框,每次鼠标移入时,先“初始化”悬浮块的位置,之后再控制悬浮框滑入。
在本文的案例当中,小编使用的是第二种方法(初始化悬浮块位置)来实现滑动。
2、功能实现逻辑分析
首先通过JS,获取鼠标在块当中的坐标;
此后,根据“鼠标所处的位置”判断鼠标移入方向“;
最后,再根据鼠标移入方向来执行相应的功能。
3、功能实现
1、获取鼠标块内坐标
想要得到鼠标在块内位置,需要使用如下JS中获取位置的方法:
jQuery方法中的“$(元素).offset().top”用于获取元素距页面顶部的距离;“$(元素).offset().left”用于获取元素距页面左边的距离;
原生JS中,通过事件对象(event)的pageX可以获取鼠标相对于页面的X轴位置;通过事件对象(event)的pageY可以获取鼠标相对于页面的Y轴位置。
通过jQuery获取到当前元素与页面顶部、左侧的距离,再获取鼠标处于页面的坐标;之后通过计算获取到下图中的