移動端模擬hover：按鈕點選變色之後還原

米女巫發表於2019-02-16

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

方法一：CSS3+JS

用keyframes動畫，js點選按鈕時新增keyframes動畫，定時器移除keyframes動畫
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>移動端按鈕點選變色之後還原</title>
    <link rel="stylesheet" type="text/css" href="http://dn.yunzhenshi.com/css/reset-min.css">
    <style>
        .btn{
            font-size: 1.5em;
            line-height: 2em;
            text-align: center;
            background: #ce4f54;
            color: #fff;
            width: 200px;
        }
        .bounce {
            -webkit-animation-name: bounce;
            animation-name: bounce;
            -webkit-animation-duration: 1s;
            animation-duration: 1s;
            -webkit-animation-fill-mode: both;
            animation-fill-mode: both
            -webkit-transform-origin: center bottom;
            -ms-transform-origin: center bottom;
            transform-origin: center bottom
        }
        #jq22{
            animate-duration: 2s;    /*//動畫持續時間*/
            animate-delay: 1s;    /*//動畫延遲時間*/
            animate-iteration-count: 1;    /*//動畫執行次數*/
        }
        @-webkit-keyframes bounce {
            0%{background: #ce4f54;}
            50%{background: #ff0;}
            100%{background: #ce4f54;}
        }

        @keyframes bounce {
            0%{background: #ce4f54;}
            50%{background: #ff0;}
            100%{background: #ce4f54;}
        }
    </style>
</head>
<body>

<div id="jq22" class="btn">按鈕按鈕</div>

<script src="http://dn.yunzhenshi.com/js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        $(`#jq22`).click(function () {
            $(`#jq22`).addClass(`bounce`);
            setTimeout(function(){
                $(`#jq22`).removeClass(`bounce`);
            }, 1000);
        });
    });
</script>
</body>
</html>

方法二：JS

用touchstart，touchend來進行樣式的新增和移除。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>移動端按鈕點選變色之後還原</title>
    <link rel="stylesheet" type="text/css" href="http://dn.yunzhenshi.com/css/reset-min.css">
    <style>
        .btn1{
            font-size: 1.5em;
            line-height: 2em;
            text-align: center;
            background: #ce39bd;
            color: #fff;
            width: 200px;
        }
        .btn2{
            font-size: 1.5em;
            line-height: 2em;
            text-align: center;
            background: #f00;
            color: #fff;
            width: 200px;
        }
    </style>
</head>
<body>

<div id="jq22" class="btn1">按鈕按鈕</div>

<script src="http://dn.yunzhenshi.com/js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        function changeColor(id,class1,class2) {
            $("#"+id).on("touchstart",function () {
                $(this).attr("class",class1)
            })
            $("#"+id).on("touchend",function () {
                $(this).attr("class",class2)
            })
        }
        changeColor("jq22","btn2","btn1")
    });
</script>
</body>
</html>

方法三：JS

網友的力量是強大，後來從網上找到了一個列表頁的demo，升級版。
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0,user-scalable=no">
    <title>移動端模擬hover</title>
    <style>
        html {
            font-size: 100px;
        }

        * {
            font-size: .16rem;
        }
        .content {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            overflow: auto;
            z-index: 10;
            background-color: #fff;
            -webkit-overflow-scrolling: touch;
        }
        .items {
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .items li {
            box-sizing: border-box;
            line-height: .40rem;
            text-indent: 1em;
            border-bottom: 1px solid #e3e3e3;
        }

        .items li.active {
            background-color: #e3e3e3;
        }
    </style>
</head>
<body>
<div class="content">
    <ul class="items">
        <li class="action-btn">item1</li>
        <li class="action-btn">item2</li>
        <li class="action-btn">item3</li>
        <li class="action-btn">item4</li>
        <li class="action-btn">item5</li>
    </ul>
</div>

<script src="http://dn.yunzhenshi.com/js/jquery-1.8.3.min.js"></script>
<script>
    $(function () {
        //自定義tap
        $(document).on("touchstart", function (e) {
            if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 0);
        });
        $(document).on("touchmove", function (e) {
            if (!$(e.target).hasClass("disable")) $(e.target).data("isMoved", 1);
        });
        $(document).on("touchend", function (e) {
            if (!$(e.target).hasClass("disable") && $(e.target).data("isMoved") == 0) $(e.target).trigger("tap");
        });

        //按鈕點選效果
        $(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");
        });

    });
</script>
</body>
</html>

相關文章