<div class="header"> 實現思路：先布局好靜態布局，再使用hover模擬動畫行為，再改為類名on等用js進行控制！ </div> <div class="banner"> <h1>前端開發</h1> <p> Web前端開發是從網頁制作演變而來的，名稱上有很明顯的時代特征。在互聯網的演化進程中， 網頁制作是Web1.0時代的產物，那時網站的主要內容都是靜態的，用戶使用網站的行為也以 瀏覽為主。 </p> </div> <div class="con"> <div class="con_l"><img src="images/1.jpg" alt="" /></div> <div class="con_2"><img src="images/2.jpg" alt="" /></div> </div> <div class="news">news</div> <div class="footer">footer</div>

*{margin:0px;padding:0px;}//粗暴地清除默認邊距body{ font-family:"Arial Microsoft Yahei"; font-size:16px; font-weight:bold;}.header{ width:100%;height:500px; background-color: #10E668;}.banner{ width:100%;height:600px; background:#F7CF3B; text-align: center; margin:30px auto; overflow: hidden;}.banner h1{ font-size:30px; padding:50px 0; position:relative; top:400px; transition:all 0.3s 0.3s linear;}.banner p{ font-size:18px; width:80%; margin:30px auto; line-height: 1.8em; text-align: left; text-indent:2em; position:relative; top:400px; transition:all 0.5s 0.5s linear;}//動畫類.banner.on h1,.banner.on p{ top:0px;}.con{ width:80%;height:720px; background:#508E5A; margin:20px auto; overflow: hidden;}.con img{ width:400px;height:auto;}.con_l{ float: left; position:relative; left:-400px; transition:all 0.3s 0.3s linear;}.con_2{ float: right; position:relative; right:-400px; transition:all 0.3s 0.3s linear;}//動畫類.con.on .con_l{ left:0;}.con.on .con_2{ right:0;}.news{ width:100%;height:600px; background:#CA3400;}.footer{ width:100%;height:600px; background-color: #ccc;}

$(function(){ /*version 0.1.0 函數封裝*/ //向下滾動時 function addClass(ele){ var winH=$(window).height()*0.5;//可視窗口的高度的一半，更改0.5可以調整滾動到底部、中部、頂部時候開始加載 var top=$(window).scrollTop();//可視窗口的滾動高度 var ele_t=$(ele).offset().top;//內容區的top var ele_h=$(ele).height();//內容區的高 //判斷條件，看草稿圖1！ if(top<ele_t-winH){ $(ele).removeClass('on'); }else if((top>ele_t-winH)&&(top<ele_t+ele_h)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //向上滾動時，看草稿圖2！ function addClass2(ele){ var winH=$(window).height()*0.5;//更改0.5可以調整滾動到底部、中部、頂部時候開始加載 var top=$(window).scrollTop();//可視窗口的滾動高度 var ele_t=$(ele).offset().top;//內容區的top var ele_h=$(ele).height();//內容區的高 //判斷條件 if(top>ele_t+ele_h){ $(ele).removeClass('on'); }else if((top<ele_t+ele_h)&&(top>ele_t-winH*2)){ $(ele).addClass('on'); }else{ $(ele).removeClass('on'); } } //獲取前一次的滾動高度（這里是第一次） var firstTop=$(window).scrollTop(); $(window).scroll(function(){ //每次滾動重新獲取滾動高度 var lastTop=$(this).scrollTop(); //后一次滾動高度大于前一次滾動高，說明向下滾動，否則想上滾動！ if(lastTop>firstTop){ //加載對應的內容區域 addClass('.banner'); addClass('.con'); }else{ addClass2('.banner'); addClass2('.con'); } //每次都將后一次的滾動高度賦值給前一次的滾動高度 firstTop=lastTop; });});