jQuery Parallax是一種常用的效果,可以使得網(wǎng)頁(yè)的視覺(jué)效果更為豐富。下面介紹一下jQuery Parallax的一些參數(shù)。
$(document).ready(function(){ $(window).scroll(function(){ var scrollTop = $(this).scrollTop(); $('.parallax').css('background-position', '0 '+(-(scrollTop/3))+'px'); }); });
代碼解釋:
$(document).ready(function(){ //當(dāng)文檔準(zhǔn)備就緒時(shí)執(zhí)行以下代碼 $(window).scroll(function(){ //當(dāng)頁(yè)面滾動(dòng)時(shí)執(zhí)行以下代碼 var scrollTop = $(this).scrollTop(); //獲取滾動(dòng)條的垂直位置 $('.parallax').css('background-position', '0 '+(-(scrollTop/3))+'px'); //讓類名為.parallax的元素的背景位置在垂直方向上移動(dòng),值為scrollTop的三分之一的相反數(shù) }); });
參數(shù)說(shuō)明:
- scrollTop:獲取滾動(dòng)條的垂直位置。
- background-position:設(shè)置背景圖片的位置。
- 0:圖片的水平位置不變。
- -(scrollTop/3):圖片的垂直位置,scrollTop除以3的值為一個(gè)比較合適的值,可以根據(jù)實(shí)際情況進(jìn)行調(diào)整。
- px:背景圖片的單位。
總結(jié):
通過(guò)這些參數(shù)的設(shè)置可以實(shí)現(xiàn)不同的效果,可以根據(jù)實(shí)際需求進(jìn)行調(diào)整。同時(shí)也可以借助不同的jQuery插件來(lái)實(shí)現(xiàn)更加復(fù)雜的效果。