實現慕課網首頁的效果
一直喜歡在慕課網上學東西，因為資源比較全視頻也比較豐富嘛。后來在首頁上看到那些樓層在滾動的時候會動態的出現，里面的內容也會呈動態效果的往上頂，感覺很酷炫啊。。。那會兒還不知道是怎么實現的。。。甚至還想到了是不是所謂的動態加載，結果貌似自己想復雜了，畢竟無知者無畏嘛
今天又去看的時候，突然想到了實現的方法，就動手做了，代碼如下。
<!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表示的是窗口可見區的高度。
恩。 今天就寫到這里吧。。。
接觸前端近四個月了，第一次正式寫博客。。。想想還有點激動呢。。。 以后多寫多寫。。。算是對自己的一個總結吧