python点击弹出悬浮框_“鼠标移入显示悬浮框”特效【转】

1、效果说明

在效果当中，当用户将鼠标移入一个块时，会从鼠标的移入方向滑入一个悬浮块，悬浮块会随着鼠标移出当前块，且滑出方向遵循鼠标的移出方向

2、实现原理分析

1、结构分析

由于悬浮层有可能从上下左右四个方向滑入目标块，因此需要先针对结构进行处理。

在此，可以通过两种方法实现“悬浮层”。

一种方法是为每个块定位四个悬浮块(上下左右)，当满足鼠标移入的条件时，让相应的悬浮块滑入；

第二种方法是只为每个块定位一个悬浮框，每次鼠标移入时，先“初始化”悬浮块的位置，之后再控制悬浮框滑入。

在本文的案例当中，小编使用的是第二种方法(初始化悬浮块位置)来实现滑动。

2、功能实现逻辑分析

首先通过JS，获取鼠标在块当中的坐标；

此后，根据“鼠标所处的位置”判断鼠标移入方向“；

最后，再根据鼠标移入方向来执行相应的功能。

3、功能实现

1、获取鼠标块内坐标

想要得到鼠标在块内位置，需要使用如下JS中获取位置的方法：

jQuery方法中的“$(元素).offset().top”用于获取元素距页面顶部的距离；“$(元素).offset().left”用于获取元素距页面左边的距离；

原生JS中，通过事件对象(event)的pageX可以获取鼠标相对于页面的X轴位置；通过事件对象(event)的pageY可以获取鼠标相对于页面的Y轴位置。

通过jQuery获取到当前元素与页面顶部、左侧的距离，再获取鼠标处于页面的坐标；之后通过计算获取到下图中的