移動端模擬hover：按鈕點擊變色之后還原

darkbug 發(fā)布于2019-08-30 13:21 / 1448人閱讀

摘要：移動端按鈕點擊變色之后還原按鈕按鈕方法三網(wǎng)友的力量是強(qiáng)大，后來從網(wǎng)上找到了一個列表頁的，升級版。移動端模擬自定義按鈕點擊效果遍歷子類查看有沒有子類觸發(fā)過動作如果子類已經(jīng)觸發(fā)了動作，父類則取消觸發(fā)操作

需求：點擊按鈕希望像在PC端那樣有個類似于hover的效果，觸摸按鈕變色，手指離開變回原來的顏色；

方法一：CSS3+JS

用keyframes動畫，js點擊按鈕時添加keyframes動畫，定時器移除keyframes動畫




    
    
    移動端按鈕點擊變色之后還原
    
    



按鈕按鈕

方法二：JS

用touchstart，touchend來進(jìn)行樣式的添加和移除。




    
    
    移動端按鈕點擊變色之后還原
    
    



按鈕按鈕

方法三：JS

網(wǎng)友的力量是強(qiáng)大，后來從網(wǎng)上找到了一個列表頁的demo，升級版。




    
    
    移動端模擬hover
    



    
        item1
        item2
        item3
        item4
        item5

云服務(wù)器 GPU云服務(wù)器按鈕點擊變色 html按鈕變色代碼按鈕變色效果html html 漸變色按鈕

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

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

相關(guān)文章

移動端模擬hover：按鈕點擊變色之后還原

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

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

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

余學(xué)文 2019-08-01 16:10 評論0 收藏0
CSS實現(xiàn)8種炫酷按鈕

在各種UI組件庫大行其道的今天，大家已經(jīng)很少自己用CSS去實現(xiàn)一些效果了，久而久之CSS的水平也越來越退步，所以有空還是得練練。今天給大家分享8種炫酷按鈕的CSS實現(xiàn)。 1. 3D按鈕1 showImg(https://segmentfault.com/img/remote/1460000019943760?w=640&h=192); 現(xiàn)在的主流是扁平化的設(shè)計，擬物化的設(shè)計比較少見了，所以我們僅從...

張春雷 2019-08-30 15:44 評論0 收藏0
CSS實現(xiàn)8種炫酷按鈕

在各種UI組件庫大行其道的今天，大家已經(jīng)很少自己用CSS去實現(xiàn)一些效果了，久而久之CSS的水平也越來越退步，所以有空還是得練練。今天給大家分享8種炫酷按鈕的CSS實現(xiàn)。 1. 3D按鈕1 showImg(https://segmentfault.com/img/remote/1460000019943760?w=640&h=192); 現(xiàn)在的主流是扁平化的設(shè)計，擬物化的設(shè)計比較少見了，所以我們僅從...

fai1017 2019-08-02 15:41 評論0 收藏0