发表于： 2017-03-24 22:44:33

任务十五

今天完成的事情

1. 完善轮播图的响应式问题，解决方案是在每次宽度改变时，重新加载页面。

window.onresize=function () {
   window.location.reload();
}

但是这不是一个好的写法，在只是用js的情况下只能这样了，如果使用jquery和css3的话会简单点。
2.使用原生js和css3完成一个仿bootstrap的响应式导航栏，效果参见效果展示。

明天计划的事情

1.将组件运用到任务15。
2.开始js任务一。

遇到的问题

1.关于使用原生js实现响应式导航栏没有头绪，参考的是网上的代码（http://www.jb51.net/article/50252.htm），结果花了一上午终于全部读懂后才发现他的效果和bootstrap的效果不一样。他的菜单按钮会一直在最下面。如果要改的话，js部分基本要重写，他的动画效果实现的很有意思，是通过margintop来控制的，小屏幕时，让margintop为负值，此时菜单项的定位会更改为绝对定位，跑到屏幕外面。而我的菜单项并不是在屏幕顶部，上面还有一个div。所以要换一种思路，后来在网上查了一下折叠菜单的写法，发现实现方式大概是将子菜单绝对定位，被下方的其余菜单项覆盖，当点击当前菜单项时，给当前菜单项一个marrginbottom，撑出一片空白的空间，覆盖的子菜单展示出来。有了思路以后，写起来就简单多了。因为不想手写一个动画函数，所以用的是css3的动画属性。这是我写的一个无任何样式的导航组件的代码：

<body>
   <div class="container clearfix nav-wrap" id="nav-wrap">
      <div class="navbar-header clearfix" id="navbar-header">
         <button type="button" class="navbar-toggle" id="btn">
            <span>click</span>
         </button>
      </div>
      <div class="navbar-collapse" id="menu">
         <ul class="my-nav clearfix">
            <li>首页</li>
            <li>职业</li>
            <li>推荐</li>
            <li>关于</li>
         </ul>
      </div>
   </div>
<div class="main-wrap"></div>
</body>
<script>
   function $(id){
      return document.getElementById(id);
   }
   function navToggle() {
      var nav_wrap=$("nav-wrap");
      var navbar=$("menu");
      var btn=$("btn");
      var nav_count=0;
      btn.addEventListener("click",function () {
         var menuHeight=navbar.offsetHeight;
         if(nav_count===0){
            nav_wrap.style.marginBottom=menuHeight+"px";
            nav_count=1;
         }
         else{
            nav_wrap.style.marginBottom=0;
            nav_count=0;
         }
         
      },false);
   }
   window.onload=function () {
      navToggle();
   }
   window.onresize=function () {
      window.location.reload();
   }
</script>
</html>

布局的代码

.clearfix:after,.clearfix:before {content: "."; display: block; height:0; clear:both; visibility: hidden;}
.clearfix { *zoom:1; }
*{
  margin:0;
  padding:0;
}
.container{
  margin: 0 auto;
  width: 100%;
  max-width: 960px;
}
.nav-wrap{
  position: relative;
  line-height:36px;
  text-align: center;
  transition: margin-bottom 1s;
  li{
    list-style: none;
  }
}
@media only screen and (min-width: 681px){
  .navbar-header{
    display: none;
  }
  .navbar-collapse{
    float: right;
    li{
        float: left;
    }
  }

}
@media only screen and (max-width: 680px){
  .navbar-toggle{
    float: right;
  }
  .navbar-collapse{
      position: absolute;
      width: 100%;
      z-index: -10;
  }
}

div.main-wrap{
  //opacity: 0;
  background-color: greenyellow;
  width: 100%;
  height: 200px;
}