实现慕课网首页的某效果

实现慕课网首页的效果

一直喜欢在慕课网上学东西，因为资源比较全视频也比较丰富嘛。后来在首页上看到那些楼层在滚动的时候会动态的出现，里面的内容也会呈动态效果的往上顶，感觉很酷炫啊。。。那会儿还不知道是怎么实现的。。。甚至还想到了是不是所谓的动态加载，结果貌似自己想复杂了，毕竟无知者无畏嘛

今天又去看的时候，突然想到了实现的方法，就动手做了，代码如下。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title></title>
  <style>

  *{
    margin: 0;padding: 0;
    transition: all ease-out 0.4s;
    -webkit-transition: all ease-out 0.4s;
  }
  html,body,div{
    width: 100%;
  }
  .rows{
    height: 300px;
    overflow: hidden;
    opacity: 0;
  }
  .rows>h2{
    margin-top: 80px;
    text-align: center;
  }
  .rows-1{
     background: #f66;
  }
  .rows-2{
     background: #fcc;
  }
  .rows-3{
     background: #f44;
  }
  .rows-4{
     background: orange;
  }
  .rows-5{
     background: #b66;
  }
  .rows-6{
     background: gray;
  }
  .rows-7{
     background: #747474;
  }

  </style>
</head>
<body>
  <div id="rows">
    <div class="rows rows-1">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-2">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-3">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-4">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-5">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-6">
      <h2>我就是一个二级标题</h2>
    </div>
    <div class="rows rows-7">
      <h2>我就是一个二级标题</h2>
    </div>
  </div>
  <script>

    var rows = document.getElementsByClassName('rows');
    var aH2 = document.getElementsByTagName('h2');
    var height = 300;
    window.onload = function () {
      rows[0].style.opacity    = '1.0';
       aH2[0].style.marginTop  = '60px';
      rows[1].style.opacity    = '1.0';
       aH2[1].style.marginTop  = '60px';
    };
    document.onscroll = function () {
      var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
      var height = 300;
      var index  = parseInt(scrollTop/height) + 2;
      
      console.log(index,scrollTop);
      
      rows[index].style.opacity    = '1.0';
       aH2[index].style.marginTop  = '60px';
      
      if (index === 6) {
        document.onscroll = null;
      }
    };

  </script>
</body>
</html>

其实实现原理就是利用css3的transition属性,然后用JS判断当前滚动条的位置，改变opacity来实现淡入淡出，改变margin-top来让内容往上顶，就这样咯

PS:

今天在写的时候发现了个小东西
JS里document.body表示html里的body元素，document.documentElement表示的是html里的html元素
所以document.body.clientHeight和document.documentElement.clientHeight是不是相等呢？

恩。。。这个问题。。。
曾经我以为是相等的，也以为是不等的。。。还想到了什么混杂模式标准模式。。--笑cry
就像我看到Array.prototype.slice === [].slice,然后就天真地以为Array.prototype === []了，结果其实是我太傻太天真。

说到底还是我底子太薄了，这些东西老爱搞混。

好吧。。扯远了。。言归正传

其实这里的document.body.clientHeight表示的是页面内容的高度，而document.documentElement.clientHeight表示的是窗口可见区的高度。

恩。 今天就写到这里吧。。。

接触前端近四个月了，第一次正式写博客。。。想想还有点激动呢。。。 以后多写多写。。。算是对自己的一个总结吧

posted @ 2015-12-30 19:27  前端小虾蟹  阅读(1311)  评论(8)  编辑  收藏  举报