焦点事件

<style>
    body{
    margin: 0;
    padding: 0;
}
    .page{

        position: absolute;
        height: 100%;
        width: 100%;
        background-color: lavender;
    }
    .top{           
        position: fixed;
        width: 100%;
        height: 50px;
        background-color: cornflowerblue;
    }
    .btn{           
        width: 40px;
        height: 40px;
        margin-left: 20px;
        margin-top: 5px;
        background-color: #FFFFFF;
    }
    .btn:hover{
        cursor: pointer;
    }
    .backimg{
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 1000;
        background-color: black;
        opacity: 0.2;
        display: none;
    }
</style>
  <script>
    $(document).ready(function(){

        //侧滑按钮点击事件
        $(".btn").click(function(){

            //页面整体侧滑
            $(".page").animate({
                left:'300px'
            });


            //显示透明度div层
            $(".backimg").css({
                "display":"block"
            });
        });


        //还原点击事件
        $(".backimg").click(function(){                                
            //页面整体左滑动
            $(".page").animate({
                left:'0px'
            });

            //显示透明度div层隐藏
            $(".backimg").css({
                "display":"none"
            });
        });

    });
  </script>

    <div class="backimg"></div>

        <div class="top">

            <div class="btn"></div>
        </div>

    </div>

</body>