html鼠标悬停显示块级元素,“鼠标移入显示悬浮框”特效【转】

1、效果说明

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

2、实现原理分析

1、结构分析

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

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

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

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

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

2、功能实现逻辑分析

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

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

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

3、功能实现

1、获取鼠标块内坐标

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

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

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

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

“h”为event.pageY-$(元素).offset().top,是鼠标相对于块元素内的Y轴值；“w”同理。详细可见下图和代码。

2、划分方向区域

由于需要根据“鼠标所处的位置”判断“鼠标移入方向”，因此为四个方向确定“临界值”。为了便于理解，可以使用“对角线”将一个块划分为四个区域(如下A、B、C、D四个区域)，与“鼠标移入方向”相对应。

3、获取到鼠标的值，判断所处的区域

如何根据鼠标位置值，计算当前鼠标所在位置呢？根据当前X值，求出四条对角线(即Y的临界值)，再根据该值进行判断。

↗(左下角到右上角) Y值临界值求法：

当前X值对应的Y值临界值1 = 当前元素高度 / 当前元素宽度 * 当前鼠标X值；

↘(左上角到右下角) Y值临界值求法：

当前X值对应的Y值临界值2 = 当前元素高度 - (当前元素高度 / 当前元素宽度* 当前鼠标X值)；

A区域条件：y值 > 临界值1; y值 < 临界值2(在↗对角线上方，↘的下方)

B区域条件：y值 > 临界值1; y值 > 临界值2(在↗对角线上方，↘的上方)

C区域条件：y值 < 临界值1; y值 > 临界值2(在↗对角线下方，↘的上方)

D区域条件：y值 < 临界值1; y值 < 临界值2(在↗对角线下方，↘的下方)

感觉很乱？别急，看图！！！

4、成品代码：

.move {

width: 240px;

height: 240px;

margin: 100px auto;

}

.move li {

position: relative;

overflow: hidden;

list-style: none;

float: left;

width: 100px;

height: 100px;

margin: 0 20px 20px 0;

background: #39f;

}

.move li div {

position: absolute;

width: 100px;

height: 100px;

background: #000;

opacity: 0.5;

left: 100%;

top: 0;

}

$('.move li').hover(function(){// 移入效果

var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标

y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标

h=$(this).outerHeight(), //用于获得包括内边界(padding)和边框(border)的元素高度

w=$(this).outerWidth(), ///用于获得包括内边界(padding)和边框(border)的元素宽度

k=Math.floor(h/w);//为了防止不能整除

if((k * x) >= y && (h - k * x) >= y){//上方进入

//初始悬浮块位置，下同

$(this).children().css({

"top":"-100px",

"left": 0

})

//设置出现动画，下同

$(this).children().stop(true,true).animate({

"top": "0"

});

}

if((k * x) < y && (h - k * x) < y){// 从下方进入

$(this).children().css({

"top": "100px",

"left": "0"

})

$(this).children().stop(true,true).animate({

"top": "0"

});

}

if((k * x) < y && (h - k * x) > y){

$(this).children().css({// 从左边进入

"top": "0",

"left": "-100px"

})

$(this).children().stop(true,true).animate({

"left": "0"

});

}

if((k*x)>y && (h-k*x)

$(this).children().css({

"top": "0",

"left": "100px"

})

$(this).children().stop(true,true).animate({

"left": "0"

});

}

},function() { // 移出效果

var x=event.pageX-$(this).offset().left,//得到鼠标在块中的坐标

y=event.pageY-$(this).offset().top,//得到鼠标在块中的坐标

h=$(this).outerHeight(),

w=$(this).outerWidth(),

k=Math.floor(h / w);//为了防止不能整除

if((k * x) >= y && (h - k * x) >= y){ //从上方移出

//移出动画，下同

$(this).children().stop(true,true).animate({

"top": "-100px"

});

}

if((k * x) < y && (h - k * x) < y){ //从下方移出

$(this).children().stop(true,true).animate({

"top": "100px"

});

}

if((k * x ) < y && (h - k * x) > y){ //从左边移出

$(this).children().stop(true,true).animate({

"left": "-100px"

});

}

if((k * x) > y && (h - k * x) < y){ //下右边移出

$(this).children().stop(true,true).animate({

"left": "100px"

});

}

})