成人无码视频,亚洲精品久久久久av无码,午夜精品久久久久久毛片,亚洲 中文字幕 日韩 无码

資訊專欄INFORMATION COLUMN

移動web端模擬hover效果

wenyiweb / 2665人閱讀

摘要：在端的用戶體驗中扮演著很重要的角色，那么移動端我們又該如何增強(qiáng)這方面的用戶體驗?zāi)叵旅嫖液唵蔚脑谝苿佣四M了下的效果。其他上面只是在移動端對進(jìn)行了簡單的模擬，還有很多不足的地方。

hover在PC端的用戶體驗中扮演著很重要的角色，那么移動web端我們又該如何增強(qiáng)這方面的用戶體驗?zāi)兀?/p>

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

效果預(yù)覽

請在移動端打開 源碼

核心代碼 
//按鈕點(diǎn)擊效果
$(document).on("touchstart", ".action-btn:not(.disable)", function (e) {
    var $this = $(this);
    var flag = true;
    //遍歷子類
    $this.find("*").each(function () {
        //查看有沒有子類觸發(fā)過active動作
        if ($(this).hasClass("active")) flag = false;
    });
    //如果子類已經(jīng)觸發(fā)了active動作，父類則取消active觸發(fā)操作
    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的
實現(xiàn)原理

基于touchstart、touchmove、touchend這三個事件，動態(tài)增刪class。

默認(rèn)只對含有action-btn class且不含有disable class的對象生效
使用方法 場景1

普通列表點(diǎn)擊

    
    
  • item1
    • 
    
  • item2
    • 
    
  • item3
    • 
    
  • item4
    • 
    
  • item5
    •

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

場景2

復(fù)雜列表點(diǎn)擊 

    
    
  • 
        item0
        X
    
    • 
    
  • item1
    • 
    
  • item2
    • 
    
  • item3
    • 
    
  • item4
    •

效果：點(diǎn)擊列表時，觸發(fā)列表點(diǎn)擊效果，點(diǎn)擊小叉時，觸發(fā)小叉點(diǎn)擊效果，小叉所在列不觸發(fā)點(diǎn)擊效果。

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

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

后續(xù)我會結(jié)合我的這篇文章10行代碼搞定移動web端自定義tap事件中的tap事件進(jìn)行效果優(yōu)化。

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

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

轉(zhuǎn)載請注明本文地址：http://m.hztianpu.com/yun/86481.html

相關(guān)文章

  • 移動端滾動研究

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

    ghnor 評論0 收藏0

  • Web移動端頁面 --響應(yīng)式和動態(tài)REM

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

    BLUE 評論0 收藏0

  • 移動端模擬hover：按鈕點(diǎn)擊變色之后還原

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

    darkbug 評論0 收藏0

  • 移動端模擬hover：按鈕點(diǎn)擊變色之后還原

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

    Reducto 評論0 收藏0

發(fā)表評論

0條評論

閱讀需要支付1元查看
<