jQuery项目--ES6入门教程网站

项目的预览图

PC浏览器

手机浏览器

DIV居中

给父元素设置相对定位，就可以这样写子元素的样式来使其居中：

div {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

使用transform: translate(-50%, -50%);即使宽高不固定也能实现垂直水平居中。

蒙层弹窗的实现

HTML结构：

    <div id="wrap">
        <div id="recomment">
            <div>博客推荐</div>
            <div>
            <pre>   

    本文主要参考了阮一峰的的出版书籍（第一版），
作者已经出版了第二版书籍。且本文所摘抄的内容大多
只是基本用法，适合了解，如果想要深入学习，建议查
看作者的博客。
    点击下方按钮即可前往，<span id="time">4</span> 秒后本弹窗自动关闭。
            </pre>
            </div>
            <a href="http://es6.ruanyifeng.com" target="_blank" id="lA">立即前往</a>
            <a href="####" id="rA">留在本站</a>
        </div>
    </div>

CSS样式：

#wrap {
    display: none;
    height: 100vh;
    position: relative;
    top: 0;
    left: 0;
    right:0;
    background-color: #777;
}

#recomment  {
    width: 400px;
    height: 270px;
    border: 1px solid #eee;
    background: #fff;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

JS部分：

//博客推荐弹窗的自动消失
//时间显示
$('#wrap').slideDown(200);
var time = setInterval(function () {
              $('#time').html(parseInt($('#time').html()) - 1);
           },1000);

setTimeout(function () {
    //去除计时器
    clearInterval(time);

    $('#wrap').slideUp(400);
    setTimeout(function () {
        $('#wrap').remove();
    }, 400);   
},4000);

// 留在本站
$('#rA').click(function () {
    $('#wrap').remove();
});

结束语

到此为止，核心的部分就总结完了。点击下方地址就可以看这次的demo哦。
点我点我