扁平化风格博客——后续

之前Po出的扁平化风格源码，只用了HTML5+CSS3（具体详见http://blog.csdn.net/ansheng02/article/details/78618750），这次的后续将会添加上侧边栏、返回顶部、及文章页。

首先要有侧边栏及其内容和返回顶部按钮。

<div class="mask">
    <div id="sidebar">
        <ul>
            <li><a href="">item1</a></li>
            <li><a href="">item2</a></li>
            <li><a href="">item3</a></li>
            <li><a href="">item4</a></li>
            <li><a href="">item5</a></li>
        </ul>
    </div>
    </div>
    <button class="back-to-top">返回顶部</button>

在main.css中设置其样式。

.mask{
    display: none;
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: rgba(0,0,0,0.3);
}

#sidebar{
    position: fixed;
    top: 0;
    bottom: 0;
    right: -300px;
    width: 300px;
    background: #333;
    color: #fff;
    padding: 20px 0;
    transition: right 0.5s;
}

#sidebar ul{
    list-style: none;
}

#sidebar ul a{
    color: #fff;
    text-decoration: none;
    width: 100%;
    padding: 10px;
    display: inline-block;
}

#sidebar ul a:hover{
    background: #444;
}

.back-to-top{
    position: fixed;
    bottom: 30px;
    right: 30px;
    background: rgba(252,252,252,0.4);
}

.article .content{
    background: #fefefe;
}

.content_wrapper{
    width: 1080px;
    margin: 0 auto;
}

.article_info{
    font-size: 14px;
    color:#888;
    padding: 15px 0;
}

article{
    letter-spacing: 1px;
    line-height: 2;
    padding: 10px 0;
}

这只是有了雏形，真正要动起来的话还是需要JavaScript的帮助。整个思路过程为：

①、获取id和类名

②、监听这些类名要发生什么事件

③、怎么才能发生事件

④、触发事件

我理解的思路大概是这样，这也是一个通用的思路，虽然我还是一个什么实战项目都没有的小白。套用在这个案例中，我认为，在定义选择了侧边栏、返回顶部按钮、mask、侧边栏触发器后；监听侧边栏点击事件，显示或者隐藏；监听返回顶部按钮，在这里，要用一个if语句，如果以滚动的部分高于窗口部分，则显示返回顶部按钮，否则隐藏按钮，具体代码如下：

/**
 * Created by Administrator on 17-11-27.
 */
;$(function(){
    'use strict';

    var sidebar = $('#sidebar'),//选择侧栏
        mask = $('.mask'), //选择mask
        backButton = $('.back-to-top'), //选择返回顶部
        sidebar_trigger = $('#sidebar_trigger'); //选择侧栏触发器

    function showSideBar(){ //显示侧栏
        mask.fadeIn();  //显示mask
        sidebar.animate({'right':0}); //调整侧栏相关的CSS
    }

    function hideSideBar() { //隐藏侧栏
        mask.fadeOut();  //隐藏mask
        sidebar.animate({'right': -sidebar.width()});  //调整侧栏相关的CSS
    }

    sidebar_trigger.on('click',showSideBar)  //监听侧栏点击事件
    mask.on('click',hideSideBar)  //监听mask点击事件
    backButton.on('click',function(){ //监听返回顶部按钮点击事件
        $('html,body').animate({
            scrollTop:0
        },800)
    })

$(window).on('scroll',function(){  //监听window的scroll事件
    //如果已滚动部分高于窗口高度
    if($(window).scrollTop() > $(window).height()){
        //显示返回按钮
        backButton.fadeIn();
    }else{
        //否则隐藏返回按钮
        backButton.fadeOut();
    }
})
    //浏览器每重新更新或者加载页面，就会触发一次该事件（scroll事件）
    $(window).trigger('scroll');
})

文章页比较好做，在首页的基础上，先删除掉原内容部分，只留下页头和页脚，中间在填充新内容就好了。在index.html中更改连接，就可以将两个页面互动起来（此处代码省略）。

这个也是在边看教程边整理的思路，最近在敲很多关于实战的项目练习，希望自己越来越好，还有一个月就要结束2017年了，但愿在最后的结束时刻，我可以说，嗯，我可以开发前端项目了。

dome，你会让我遇见更好的自己。

扁平化风格博客——后续

猜你喜欢