“鼠標移入顯示懸浮框”特效【轉】

pepperwang 發布于2019-08-20 14:17 / 778人閱讀

摘要：劃分方向區域由于需要根據鼠標所處的位置判斷鼠標移入方向，因此為四個方向確定臨界值。

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、成品代碼：

本文出自HTML5學堂

GPU云服務器云服務器切換特效特效插件透明特效圖片特效

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/81520.html

(個人筆記)在給在線簡歷添加js特效過程中遇到的問題及解決方法一

摘要：個人筆記在給在線簡歷添加特效過程中遇到的問題及解決方法一預覽頁面滾動元素的事件處理函數。語法參數是一個函數的引用。事件是當窗口發生滾動得時候觸發的事件返回文檔在垂直方向已滾動的像素值。 (個人筆記)在給在線簡歷添加js特效過程中遇到的問題及解決方法一 github預覽頁面滾動demo 元素的 scroll 事件處理函數。語法 element.onscroll = functionR...

Yuanf 2019-08-22 17:07 評論0 收藏0
前端特效【第04期】|果汁混合效果-下

摘要：往期回顧在上一期的前端特效里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題先來回顧下咱們的果汁混合效果吧果汁混合效果，掃描下方二維碼就看到啦我們接著上期的內容來繼續往下講吧，本期往期回顧在上一期的【前端特效】?里，我們已經把果汁混合的效果里面的圓形菜單做好了，如果你錯過了上篇文章今天我們要討論的是杯子里面的液體生成問題 ...

宋華 2019-08-26 12:22 評論0 收藏0
入手萬彩錄屏大師體驗高清錄屏視頻輸出且自帶視頻編輯特效素材

摘要：老蔣有在之前活動期間入手一個萬彩錄屏大師企業版的賬戶，大約花費元左右，當然是終生賬戶支持升級的。這樣，簡單的體驗入手過的萬彩錄屏大師軟件，優點是支持付費后終生免費升級，而且支持高清輸入導出視頻，且支持剪輯視頻在一個軟件中。老蔣有在之前618活動期間入手一個萬彩錄屏大師企業版的賬戶，大約花費500元左右，當然是終生賬戶支持升級的。當初選擇這款錄屏軟件的原因是沒有深入尋找是否有其他免費錄屏軟件，...

dailybird 2021-10-18 13:34 評論0 收藏0
前端每日實戰：147# 視頻演示如何用純 CSS 創作透視按鈕的懸停特效

摘要：效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。可交互視頻此視頻是可以交互的，你可以隨時暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbhDnp?w=400&h=302); 效果預覽按下右側的點擊預覽按鈕可以在當前頁面預覽，點擊鏈接可以全屏預覽。 https://codepen.io/comehop...

cppprimer 2019-08-02 11:37 評論0 收藏0