如何实现移动端和pc端按下状态效果

最新推荐文章于 2022-05-17 15:18:23 发布

大西瓜啃完了哟

最新推荐文章于 2022-05-17 15:18:23 发布

阅读量1.2k

点赞数

文章标签：效果

本文链接：https://blog.csdn.net/haihiaandtongtong/article/details/46050387

版权

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <!--让文档的宽度与设备的宽度保持1:1，并且文档最大的宽度比例是1.0，且不允许用户点击屏幕放大浏览-->
    <meta name="apple-mobile-web-app-capable" content="yes">
    <!--phone设备中的safari私有meta标签，它表示：允许全屏模式浏览-->
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--iphone的私有标签，它指定的iphone中safari顶端的状态条的样式-->
    <meta name="format-detection" content="telephone=no">
    <!--告诉设备忽略将页面中的数字识别为电话号码-->
    <meta content="email=no" name="format-detection" />
    <!--不自动识别页面中的 邮件地址-->
    <title>按下态实现</title>
    <style>
        html, body {
            margin: 0;
            padding: 0;
        }

        body {
            background: #fff;
        }

        div {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            width: 100%;
        }

        .cont .consulting {
            width: 92%;
            margin: 30px auto 0 auto;
        }

        .cont .consulting a {
            width: 200px;
            display: block;
            font-size: 16px;
            text-align: center;
            box-sizing: border-box;
            line-height: 80px;
            cursor: pointer;
        }

        .cont .consulting .phone {
            background: green;
        }

        .cont .consulting .phone-bg {
            background: red;
        }

    </style>
</head>
<body>
<div class="min">
    <div class="header"></div>
    <div class="cont">
        <div class="consulting">
            <a id="phone" class="phone">请点击我</a>
        </div>
    </div>
</div>
<script>
    /**
     * 手机按下态
     * @type {{touchstart: string, touchend: string, initTouchEvents: Function}}
     */
    var touchEvents = {
        touchstart: "touchstart",
        touchend: "touchend",
        initTouchEvents: function () {
            //navigator.platform获取客户端操作系统
            //window.navigator.msPointerEnabled  判断浏览器是否支持相关的事件,只适用于Ie浏览器
            //window.navigator.userAgent 用户浏览器信息
            console.log(window.navigator);
            if(window.navigator.msPointerEnabled||window.navigator.userAgent.indexOf("iPhone")<=0){
                this.touchstart = "mouseover";
                this.touchend = "mouseout";
            }
        }
    };
    var phone = document.getElementById("phone");
    touchEvents.initTouchEvents();
    phone.addEventListener(touchEvents.touchstart, function (e) {
        var self=this;
        self.style.background = "red";
        e.stopPropagation();
        e.preventDefault();

    });
    phone.addEventListener(touchEvents.touchend, function (e) {
        var self=this;
        self.style.background = "green";
        e.stopPropagation();
        e.preventDefault();
    });



    <!--

    设备识别
    var isAndroid = navigator.appVersion.toLowerCase().indexOf('android') >= 0,
    isIphone = navigator.appVersion.toLowerCase().indexOf('iphone') >= 0;
if (isAndroid) {
   alert(1);
}else if(isIphone){
    alert(2);

}else{
    console.log(3);
}
    -->


</script>
</body>
</html>