浏览器使用说明动态效果

最新推荐文章于 2022-04-19 12:55:39 发布

爱学习的小饼干

最新推荐文章于 2022-04-19 12:55:39 发布

阅读量433

点赞数

分类专栏：笔记文章标签： vue.js

本文链接：https://blog.csdn.net/weixin_41813243/article/details/122626092

版权

笔记专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="./js/jquery-1.9.1.min.js"></script>
    <title>Document</title>

    <style>
        /* 浏览器提示 */
        .fl_open {
            position: fixed;
            width: 90px;
            z-index: 999;
            left: 0;
            bottom: 20px;
            border-top-right-radius: 33px;
            border-bottom-right-radius: 33px;
            background-color: #1e95e7;
            color: #fff;
            text-align: center;
            padding-right: 20px;
            padding-top: 5px;
        }

        .fl_open p{
            padding: 0;
            height: 10px;
            line-height: 5px;
        }

        .fl_pop {
            position: fixed;
            background: #317AC9;
            z-index: 9999;
            left: -4000px;
            bottom: 0;
            width: 100%;
            height: 150px;
            color: #FFFFFF;
        }

        .fl_pop_left {
            margin: 0 auto;
            position: relative;
            padding-top: 6px;
        }

        .fl_pop_left>p {
            line-height: 18px;
            font-size: 12px;
            display: inine-block;
        }

        .fl_pop_left .fl_pop_p1 {
            font-size: 14px;
            font-weight: bold;
            background: url(../img/warning.png) no-repeat 5px;
            padding-left: 35px;
            margin-bottom: 0;
        }

        .fl_pop_left .fl_pop_p2 {
            font-size: 14px;
            font-weight: bold;
            display: none;
            margin-bottom: 0;
        }

        .fl_pop .fl_wrap_close {
            position: absolute;
            top: 10px;
            right: 10%;
            font-size: 20px;
            line-height: 1.2;
            font-family: Simsun;
            color: #fff;
            outline: 0 none;
        }

        @media (min-width: 340px) {
            .fl_pop_left {
                padding-top: 12px;
            }
        }

        @media (min-width: 646px) {
            .fl_pop_left {
                padding-top: 22px;
            }
        }

        @media (min-width: 1196px) {
            .fl_pop_left {
                padding-top: 15px;
            }

            .fl_pop_left>p {
                font-size: 16px;
                line-height: 28px;
            }

            .fl_pop_left .fl_pop_p1,
            .fl_pop_left .fl_pop_p2 {
                font-size: 18px;
            }

            .fl_pop .fl_wrap_close {
                font-size: 28px;
            }
        }
    </style>
</head>

<body>
    <!--fl_open-->
    <div class=" ">
        <div class="fl_open">
            <p>浏览器</p>
            <p>使用说明</p>
        </div>
        <div class="fl_pop">
            <div class="fl_pop_left contain">
                <p class="fl_pop_p1" id="p1" style="margin-left: 100px;">您的浏览器不在兼容范围内，建议使用以下浏览器：</p>
                <p class="fl_pop_p2" id="p2" style="margin-left: 100px;">您的浏览器在兼容范围内：</p>
                <p style="margin-left: 100px;">IE浏览器9.0版本及以上； Google Chrome浏览器 63版本及以上； 360浏览器9.1版本及以上，且IE内核9.0及以上。</p>
                <p style="margin-left: 100px;">如果出现格式错乱，加载错误等问题，请使用ctrl+F5刷新页面。</p>
                <a href="javascript:void(0);" class="fl_wrap_close" title="关闭" id="">×</a>
            </div>
        </div>
    </div>
</body>

<script>
    $(function () {
        var winWidth = $(window).width();
        if (winWidth > 1024) {
            browserInfo();
        } else {
            $('.footer .contain .footer-info .pad-r').append(
                '<p>为确保最佳浏览效果，建议您使用以下浏览器版本：IE浏览器9.0版本及以上； Google Chrome浏览器 63版本及以上； 360浏览器9.1版本及以上，且IE内核9.0及以上。</p>'
            )
        }
    });

    $('.fl_pop').on('click', '.fl_wrap_close', function () {
        winWidth = $('body').width();
        $('.fl_pop').animate({
            left: '-' + winWidth + 'px'
        }, function () {
            $('.fl_open').animate({
                left: '0px'
            });
        });
    });

    $('.fl_open').on('click', function () {
        $('.fl_open').animate({
            left: '-100px'
        }, function () {
            $('.fl_pop').animate({
                left: '0px'
            });
        });
    });

    function getBrowserInfo() {
        var Sys = {};
        var ua = navigator.userAgent.toLowerCase();
        var re = /(trident|msie|chrome|version).*?([\d.]+)/;
        var m = ua.match(re);
        if (m != null) {
            Sys.browser = m[1].replace(/version/, "'safari");
            Sys.ver = m[2];
            return Sys;
        } else
            return null;
    }

    function browserInfo() {
        var bf = getBrowserInfo();
        if (bf == null) {
            if (!isIE()) {
                setCss();
            }
        } else if (((bf.browser === "chrome") && (Number.parseInt(bf.ver) < 63)) || ((bf.browser === "msie") && ((bf
                .ver).valueOf()) < 9)) {
            setCss();
        } else {
            $('#p1').hide();
            $('#p2').show();
        }

    }

    function isIE() {
        if (!!window.ActiveXObject || "ActiveXObject" in window)
            return true;
        else
            return false;
    }

    function setCss() {
        $('.fl_pop_p1').html("您的浏览器不在一网通办兼容范围内，建议使用以下浏览器版本：");
        $('.fl_pop').animate({
            left: '0px'
        });
        $('.fl_open').animate({
            left: '-84px'
        });
    }
</script>

</html>