成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

“鼠標(biāo)移入顯示懸浮框”特效【轉(zhuǎn)】

pepperwang / 791人閱讀

摘要：劃分方向區(qū)域由于需要根據(jù)鼠標(biāo)所處的位置判斷鼠標(biāo)移入方向，因此為四個(gè)方向確定臨界值。

1、效果說(shuō)明

在效果當(dāng)中，當(dāng)用戶將鼠標(biāo)移入一個(gè)塊時(shí)，會(huì)從鼠標(biāo)的移入方向滑入一個(gè)懸浮塊，懸浮塊會(huì)隨著鼠標(biāo)移出當(dāng)前塊，且滑出方向遵循鼠標(biāo)的移出方向

2、實(shí)現(xiàn)原理分析 1、結(jié)構(gòu)分析

由于懸浮層有可能從上下左右四個(gè)方向滑入目標(biāo)塊，因此需要先針對(duì)結(jié)構(gòu)進(jìn)行處理。
在此，可以通過(guò)兩種方法實(shí)現(xiàn)“懸浮層”。
一種方法是為每個(gè)塊定位四個(gè)懸浮塊（上下左右），當(dāng)滿足鼠標(biāo)移入的條件時(shí)，讓相應(yīng)的懸浮塊滑入；
第二種方法是只為每個(gè)塊定位一個(gè)懸浮框，每次鼠標(biāo)移入時(shí)，先“初始化”懸浮塊的位置，之后再控制懸浮框滑入。
在本文的案例當(dāng)中，小編使用的是第二種方法（初始化懸浮塊位置）來(lái)實(shí)現(xiàn)滑動(dòng)。

2、功能實(shí)現(xiàn)邏輯分析

首先通過(guò)JS，獲取鼠標(biāo)在塊當(dāng)中的坐標(biāo)；
此后，根據(jù)“鼠標(biāo)所處的位置”判斷鼠標(biāo)移入方向“；
最后，再根據(jù)鼠標(biāo)移入方向來(lái)執(zhí)行相應(yīng)的功能。

3、功能實(shí)現(xiàn) 1、獲取鼠標(biāo)塊內(nèi)坐標(biāo)

想要得到鼠標(biāo)在塊內(nèi)位置，需要使用如下JS中獲取位置的方法：
jQuery方法中的“$(元素).offset().top”用于獲取元素距頁(yè)面頂部的距離；“$(元素).offset().left”用于獲取元素距頁(yè)面左邊的距離；
原生JS中，通過(guò)事件對(duì)象（event）的pageX可以獲取鼠標(biāo)相對(duì)于頁(yè)面的X軸位置；通過(guò)事件對(duì)象（event）的pageY可以獲取鼠標(biāo)相對(duì)于頁(yè)面的Y軸位置。

通過(guò)jQuery獲取到當(dāng)前元素與頁(yè)面頂部、左側(cè)的距離，再獲取鼠標(biāo)處于頁(yè)面的坐標(biāo)；之后通過(guò)計(jì)算獲取到下圖中的“h”和“w”。
“h”為event.pageY-$(元素).offset().top,是鼠標(biāo)相對(duì)于塊元素內(nèi)的Y軸值；“w”同理。詳細(xì)可見(jiàn)下圖和代碼。

2、劃分方向區(qū)域

由于需要根據(jù)“鼠標(biāo)所處的位置”判斷“鼠標(biāo)移入方向”，因此為四個(gè)方向確定“臨界值”。為了便于理解，可以使用“對(duì)角線”將一個(gè)塊劃分為四個(gè)區(qū)域（如下A、B、C、D四個(gè)區(qū)域），與“鼠標(biāo)移入方向”相對(duì)應(yīng)。

3、獲取到鼠標(biāo)的值，判斷所處的區(qū)域

如何根據(jù)鼠標(biāo)位置值，計(jì)算當(dāng)前鼠標(biāo)所在位置呢？根據(jù)當(dāng)前X值，求出四條對(duì)角線（即Y的臨界值），再根據(jù)該值進(jìn)行判斷。
↗（左下角到右上角） Y值臨界值求法：
當(dāng)前X值對(duì)應(yīng)的Y值臨界值1 = 當(dāng)前元素高度 / 當(dāng)前元素寬度 * 當(dāng)前鼠標(biāo)X值；
↘（左上角到右下角） Y值臨界值求法：
當(dāng)前X值對(duì)應(yīng)的Y值臨界值2 = 當(dāng)前元素高度 - （當(dāng)前元素高度 / 當(dāng)前元素寬度* 當(dāng)前鼠標(biāo)X值）；

A區(qū)域條件：y值 > 臨界值1; y值 < 臨界值2（在↗對(duì)角線上方，↘的下方）
B區(qū)域條件：y值 > 臨界值1; y值 > 臨界值2（在↗對(duì)角線上方，↘的上方）
C區(qū)域條件：y值 < 臨界值1; y值 > 臨界值2（在↗對(duì)角線下方，↘的上方）
D區(qū)域條件：y值 < 臨界值1; y值 < 臨界值2（在↗對(duì)角線下方，↘的下方）

感覺(jué)很亂？別急，看圖?。?！

4、成品代碼： 


    
        
    
    
    
        
    
            
  • 
                
    
            
    • 
            
  • 
                
    
            
    • 
            
  • 
                
    
            
    • 
            
  • 
                
    
            
    •

本文出自HTML5學(xué)堂

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/81520.html

相關(guān)文章

  • (個(gè)人筆記)在給在線簡(jiǎn)歷添加js特效過(guò)程中遇到的問(wèn)題及解決方法 一

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

    Yuanf 評(píng)論0 收藏0

  • 前端特效【第04期】|果汁混合效果-下

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

    宋華 評(píng)論0 收藏0

  • 入手萬(wàn)彩錄屏大師體驗(yàn)高清錄屏視頻輸出且自帶視頻編輯特效素材

    摘要：老蔣有在之前活動(dòng)期間入手一個(gè)萬(wàn)彩錄屏大師企業(yè)版的賬戶，大約花費(fèi)元左右，當(dāng)然是終生賬戶支持升級(jí)的。這樣，簡(jiǎn)單的體驗(yàn)入手過(guò)的萬(wàn)彩錄屏大師軟件，優(yōu)點(diǎn)是支持付費(fèi)后終生免費(fèi)升級(jí)，而且支持高清輸入導(dǎo)出視頻，且支持剪輯視頻在一個(gè)軟件中。老蔣有在之前618活動(dòng)期間入手一個(gè)萬(wàn)彩錄屏大師企業(yè)版的賬戶，大約花費(fèi)500元左右，當(dāng)然是終生賬戶支持升級(jí)的。當(dāng)初選擇這款錄屏軟件的原因是沒(méi)有深入尋找是否有其他免費(fèi)錄屏軟件，...

    dailybird 評(píng)論0 收藏0

  • 前端每日實(shí)戰(zhàn)：147# 視頻演示如何用純 CSS 創(chuàng)作透視按鈕的懸停特效

    摘要：效果預(yù)覽按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽?？山换ヒ曨l此視頻是可以交互的，你可以隨時(shí)暫停視頻，編輯視頻中的代碼。 showImg(https://segmentfault.com/img/bVbhDnp?w=400&h=302); 效果預(yù)覽 按下右側(cè)的點(diǎn)擊預(yù)覽按鈕可以在當(dāng)前頁(yè)面預(yù)覽，點(diǎn)擊鏈接可以全屏預(yù)覽。 https://codepen.io/comehop...

    cppprimer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<