陪玩平台源码开发模拟hover：按钮点击变色之后还原

最新推荐文章于 2022-09-06 19:41:30 发布

云豹科技程序猿

最新推荐文章于 2022-09-06 19:41:30 发布

阅读量103

点赞数

分类专栏：游戏陪玩约单源码

原文链接：https://segmentfault.com/a/1190000008093593?utm_source=sf-similar-article

版权

游戏陪玩约单源码专栏收录该内容

158 篇文章 0 订阅

订阅专栏

在陪玩平台源码中，当用户点击按钮时希望能像在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>

以上就是“陪玩平台源码开发模拟hover：按钮点击变色之后还原”的全部内容，希望对大家有帮助。

云豹科技程序猿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
陪玩平台源码开发模拟hover：按钮点击变色之后还原

在陪玩平台源码中，当用户点击按钮时希望能像在PC端那样有个类似于hover的效果，触摸按钮变色，手指离开变回原来的颜色；通过这样的方式给予用户一定的反馈，提高用户的使用舒适感。方法一：CSS3+JS用keyframes动画，js点击按钮时添加keyframes动画，定时器移除keyframes动画<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="view
复制链接

扫一扫