這是demo網(wǎng)址:http://demo.cssmoban.com/csst...
隨滑鼠滾珠滑動(dòng),網(wǎng)頁(yè)中的內(nèi)容動(dòng)態(tài)出現(xiàn)是怎麼做到的
根據(jù)右側(cè)滾動(dòng)條, 當(dāng)?shù)竭_(dá)指定的位置時(shí), 就顯示出來(lái)並執(zhí)行對(duì)應(yīng)的動(dòng)態(tài)效果代碼.
這個(gè)只是加了一個(gè)滾動(dòng)監(jiān)聽。捲動(dòng)到對(duì)應(yīng)的位置讓對(duì)應(yīng)位置的opacity從0變成1,還有一些其他的css屬性,這些樣式都加入了動(dòng)畫的效果。
就是要增加一個(gè)監(jiān)聽滾動(dòng)事件,根本監(jiān)聽到的結(jié)果來(lái)判斷要不要異步獲取或者把已有但沒有顯示的部分,添加或者顯示出現(xiàn)
//滑鼠滾動(dòng)事件
$(window).scroll(function(){
//獲取當(dāng)前滾動(dòng)條距離頂部的高度
var scrollTop = $(this).scrollTop();
//定義你動(dòng)畫動(dòng)畫應(yīng)該在滾動(dòng)條在哪個(gè)高度以上顯示 假設(shè)200px;
if(scrollTop>200){
//你的動(dòng)畫效果函數(shù)
}
}