入口图片放在浏览器正中间，点击之后缩小固定在浏览器一侧

Posted 2020-10-09 和路雪

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了入口图片放在浏览器正中间，点击之后缩小固定在浏览器一侧相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title></title>

</head>
<body>

<!--大会了解提示-->
<div class="xia_box">
    <div align="center" class="xia_nr">
        <div class="xia_img">
            <a href="http://jsbr.org.cn/tuantifudaoluntan/">
                <img src="../../images/xia_ts.jpg" alt="">  <!--大图：页面刷新一进来 -->
                <a class="z_a1 z_a"  href="http://jsbr.org.cn/tuantifudaoluntan/">查看详情</a>
                <a class="z_a2 z_a"  href="http://p.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&cp=&cr=&cw=&qq-pf-to=pcqq.c2c">立即报名</a>
            </a>
            <img class="xia_close" src="../../images/xia_close.png" alt="">  <!--右上角小叉号-->
        </div>
        <style>
            .xia_img{
                position: relative;
            }
            .z_a{
                display: inline-block;
                width: 90px;
                height: 30px;
                line-height: 30px;
                text-align: center;
                color: #f3e309!important;
                background: #202b7a;
            }
            .z_a1{
                position: absolute;
                left: 200px;
                bottom: 20px;
            }
            .z_a2{
                position: absolute;
                right: 200px;
                bottom: 20px;
            }
        </style>
    </div>
</div>
<style>
    .xia_imgshow>a{
        position: relative;
        display: block;
    }
    .z_b{
        display: inline-block;
        width: 90px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #f3e309!important;
        background: #202b7a;
    }
    .z_b1{
        position: absolute;
        left: 17px;
        bottom: 82px;
    }
    .z_b2{
        position: absolute;
        left: 17px;
        bottom: 72px;
    }
    .xia_box{
        position: fixed;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        display: none;
        z-index:9999

    }
    .xia_nr{
        left: 0;
        right: 0;
        margin:0 auto;
        width: 620px;
    }
    .xia_img{position: relative;}
    .xia_img img.xia_close{
        position: absolute;
        right: 11px;
        top: 7px;
        cursor: pointer;
    }
    .xia_imgshow{
        position: fixed;
        bottom:50px;
        left:0;
        display: none;
        z-index:9999
    }
</style>
<div class="xia_imgshow">
    <a href="http://xinlicujinhui.com/tuantifudaoluntan/">
        <img src="../../images/xia_hide.jpg" alt="">  <!-- 点击大图后，悬在浏览器左侧 -->
        <a class="z_b1 z_b"  href="http://jsbr.org.cn/tuantifudaoluntan/">查看详情</a>
        <a class="z_b2 z_b"  href="http://p.qiao.baidu.com/im/index?siteid=7886751&ucid=2436607&cp=&cr=&cw=&qq-pf-to=pcqq.c2c">立即报名</a>
    </a>
</div>

<script>
    setTimeout(function(){
        $(‘.xia_box‘).css(‘display‘,‘block‘)
        $(window).resize(function(){
            $(‘.xia_nr‘).css({
                position:‘absolute‘,
                top: ($(window).height() - $(‘.xia_nr‘).outerHeight())/2
            });
        });
        // 最初运行函数
        $(window).resize();
        $(‘img.xia_close‘).click(function(){
            $(‘.xia_box‘).css(‘display‘,‘none‘)
            $(‘.xia_imgshow‘).css(‘display‘,‘block‘)
        });
    },500);
</script>
<!--大会了解提示-->
</body>
</html>

以上是关于入口图片放在浏览器正中间，点击之后缩小固定在浏览器一侧的主要内容，如果未能解决你的问题，请参考以下文章