移动端模拟hover:按钮点击变色之后还原

  • 需求:点击按钮希望像在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>
    原文作者:米女巫
    原文地址: https://segmentfault.com/a/1190000008093593
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞