移動web端模擬hover效果

wenyiweb 發布于2019-08-21 10:57 / 2573人閱讀

摘要：在端的用戶體驗中扮演著很重要的角色，那么移動端我們又該如何增強這方面的用戶體驗呢下面我簡單的在移動端模擬了下的效果。其他上面只是在移動端對進行了簡單的模擬，還有很多不足的地方。

hover在PC端的用戶體驗中扮演著很重要的角色，那么移動web端我們又該如何增強這方面的用戶體驗呢？

下面我簡單的在移動web端模擬了下hover的效果。

效果預覽

請在移動端打開源碼

核心代碼

//按鈕點擊效果
$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {
    var $this = $(this);
    var flag = true;
    //遍歷子類
    $this.find("*").each(function () {
        //查看有沒有子類觸發過active動作
        if ($(this).hasClass("active")) flag = false;
    });
    //如果子類已經觸發了active動作，父類則取消active觸發操作
    if (flag) $this.addClass("active");

});
$(document).on("touchmove", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});
$(document).on("touchend", ".action-btn:not(.disable)", function (e) {
    if ($(this).hasClass("active")) $(this).removeClass("active");
});

代碼是基于jQuery的

實現原理

基于touchstart、touchmove、touchend這三個事件，動態增刪class。

默認只對含有action-btn class且不含有disable class的對象生效

使用方法 場景1

普通列表點擊


    item1
    item2
    item3
    item4
    item5

只需要給列表添加上action-btn class以及提供相應的active class。

場景2

復雜列表點擊


    
        item0
        X
    
    item1
    item2
    item3
    item4

效果：點擊列表時，觸發列表點擊效果，點擊小叉時，觸發小叉點擊效果，小叉所在列不觸發點擊效果。

注意：無論小叉是否有點擊效果（即active class），都需要給小叉添加action-btn class。即：當列和列的子元素都有點擊邏輯的時候，都需要給它們添加action-btn class，否則會觸發父類元素的點擊效果。

其他

上面只是在移動web端對hover進行了簡單的模擬，還有很多不足的地方。例如：當用戶滑動列表時，滑動開始觸點所在的列的點擊效果會一閃而過。這個是因為點擊效果的觸發條件是touchstart。我也有嘗試在觸發touchstart時，延遲一定時間后判斷是否觸發過touchmove，沒有觸發的話才觸發點擊效果。但是在android上表現不佳，所以沒有貼出類。

后續我會結合我的這篇文章10行代碼搞定移動web端自定義tap事件中的tap事件進行效果優化。

文章有什么不對的地方，望大家指正。大家有什么好的實現方法，歡迎交流！

云服務器 GPU云服務器 js 移動端效果圖移動端web web移動端布局 web移動端開發

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

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

移動端滾動研究

摘要：還會有一個性能上的問題就是當頁面的列表過長，元素過多時，在模擬滾動，下拉刷新這段時間內，頁面也會有卡頓現象，這里采取了一個優化策略即列表較長時數量較多時，在觸發下拉刷新的時機時將頁面視窗之外的元素隱藏或者存放在里面。移動web滾動問題在移動端如果使用局部滾動，意思就是我們的滾動在一個固定寬高的div內觸發，將該div設置成overflow:scroll/auto;來形成div內部的...

ghnor 2019-08-23 14:32 評論0 收藏0
Web移動端頁面 --響應式和動態REM

摘要：當媒介最大寬度為且是橫屏時里面的樣式生效目前前端開發項目類型可以分為兩種方式，和。這樣我們的響應式網頁才完全生效了。移動端特點移動端特點沒有有沒有滾動條沒有沒有因為移動端是沒有事件的所以當我們在需要兼容移動端的頁面中應該盡量少用事件。鄙人最近才剛剛開始學習一些關于移動端的知識，還只是個小白，文中可能有許多理解錯誤，望指出，請多多見諒。響應式什么是響應式頁面呢？顧名思義響應式頁面就是能做...

BLUE 2019-04-23 13:44 評論0 收藏0
移動端模擬hover：按鈕點擊變色之后還原

摘要：移動端按鈕點擊變色之后還原按鈕按鈕方法三網友的力量是強大，后來從網上找到了一個列表頁的，升級版。移動端模擬自定義按鈕點擊效果遍歷子類查看有沒有子類觸發過動作如果子類已經觸發了動作，父類則取消觸發操作需求：點擊按鈕希望像在PC端那樣有個類似于hover的效果，觸摸按鈕變色，手指離開變回原來的顏色；方法一：CSS3+JS 用keyframes動畫，js點擊按鈕時添加keyframes動...

darkbug 2019-08-30 13:21 評論0 收藏0
移動端模擬hover：按鈕點擊變色之后還原

摘要：移動端按鈕點擊變色之后還原按鈕按鈕方法三網友的力量是強大，后來從網上找到了一個列表頁的，升級版。移動端模擬自定義按鈕點擊效果遍歷子類查看有沒有子類觸發過動作如果子類已經觸發了動作，父類則取消觸發操作需求：點擊按鈕希望像在PC端那樣有個類似于hover的效果，觸摸按鈕變色，手指離開變回原來的顏色；方法一：CSS3+JS 用keyframes動畫，js點擊按鈕時添加keyframes動...

Reducto 2019-08-20 13:39 評論0 收藏0