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

資訊專欄INFORMATION COLUMN

移動(dòng)web端模擬hover效果

wenyiweb / 2609人閱讀

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

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

下面我簡(jiǎn)單的在移動(dòng)web端模擬了下hover的效果。

效果預(yù)覽

請(qǐng)?jiān)谝苿?dòng)端打開(kāi) 源碼

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

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

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

普通列表點(diǎn)擊

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

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

場(chǎng)景2

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

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

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

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

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

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

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

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

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

相關(guān)文章

  • 移動(dòng)端滾動(dòng)研究

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

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

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

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

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

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

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

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

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

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

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

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

0條評(píng)論

閱讀需要支付1元查看
<