“滑鼠移入顯示懸浮框”特效，也可以“高大上”
本文主要內容
1、案例效果與說明
2、實現原理分析
3、功能實現
1、案例效果與說明
在效果當中，當用戶將滑鼠移入一個塊時，會從滑鼠的移入方向滑入一個懸浮塊，懸浮塊會隨著滑鼠移出當前塊，且滑出方向遵循滑鼠的移出方向（錄製gif影象時不能夠錄製滑鼠，因此無法展示滑鼠位置）。看完以後，不知道大家有沒有自己的實現思路或想法。該效果的難點在於滑鼠臨界值位置的判斷。
2、實現原理分析
2.1.結構分析
由於懸浮層有可能從上下左右四個方向滑入目標塊，因此需要先針對結構進行處理。
在此，可以通過兩種方法實現“懸浮層”。
一種方法是為每個塊定位四個懸浮塊（上下左右），當滿足滑鼠移入的條件時，讓相應的懸浮塊滑入；
第二種方法是隻為每個塊定位一個懸浮框，每次滑鼠移入時，先“初始化”懸浮塊的位置，之後再控制懸浮框滑入。
在本文的案例當中，小編使用的是第二種方法（初始化懸浮塊位置）來實現滑動。
2.2.功能實現邏輯分析
首先通過JS，獲取滑鼠在塊當中的座標；
此後，根據“滑鼠所處的位置”判斷滑鼠移入方向“；
最後，再根據滑鼠移入方向來執行相應的功能。
3、功能實現
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”同理。詳細可見下圖和程式碼。
範例程式碼
- var x=event.pageX-$(this).offset().left,//得到滑鼠在塊中的座標
- y=event.pageY-$(this).offset().top,//得到滑鼠在塊中的座標
3.2.劃分方向區域
由於需要根據“滑鼠所處的位置”判斷“滑鼠移入方向”，因此為四個方向確定“臨界值”。為了便於理解，可以使用“對角線”將一個塊劃分為四個區域（如下A、B、C、D四個區域），與“滑鼠移入方向”相對應。
3.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（在↗對角線下方，↘的下方）
感覺很亂？別急，看圖！！！
判斷滑鼠處於B區的程式碼例項：
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){
//上方進入
}3.4.根據區域，執行相應方向的功能程式碼
在判斷移入方向之後，接下來就簡單多了，為每個元素定位一個懸浮塊，根據初始位置執行相應程式碼。
//上方初始懸浮塊位置
$(this).children().css({
"top":"-100px",
"left": "0"
})
//設定移入動畫
$(this).children().stop(true,true).animate({
"top":"0"
},此處設定動畫時間，不設定為預設);
//設定移出動畫
$(this).children().stop(true,true).animate({
"top":"-100px"
});3.5.成品程式碼：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<style type="text/css">
.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;
}
</style>
<body>
<ul class="move">
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
<li>
<div></div>
</li>
</ul>
<script src="jquery-1.7.2.js" type="text/javascript"></script>
<script type="text/javascript">
$('.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)<y){// 從右邊進入
$(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"
});
}
})
</script>
</body>
</html>總結
本次文章主要介紹瞭如何獲取滑鼠在一個元素中的位置、滑鼠的移入方式，還應用到了一些數學計算，大家可以基於該效果做進一步的優化與修改，將該效果融入到其他的相關網頁製作當中。