Jquery是一種常用的JavaScript庫,可以簡化JavaScript編程。其中有一個非常實用的功能就是可以設置滑動背景。下面我們就來詳細了解一下jquery滑動背景的相關知識。
$(document).ready(function(){ //選中滑動背景的div元素 var bg = $('.bg'); // 獲取滑動背景div元素的背景圖片的高度 var bgHeight = bg.height(); //滑動背景圖片的初始位置 var pos = 0; //設置滑動背景圖片的定時器,使其定時向上滑動 setInterval(function(){ pos++; //如果滑動到了背景圖片的最底部,則將其恢復到初始位置 if(pos > bgHeight){ pos = 0; } //設置滑動背景圖片的位置 bg.css('background-position', '0 -'+ pos +'px'); }, 30); });
以上代碼會選中class為“bg”的div元素,獲取其背景圖片的高度,并設置滑動背景圖片的初始位置為0。接著設置滑動背景圖片的定時器,使其每30毫秒向上滑動1像素。當滑動到背景圖片的最底部時,就將其恢復到初始位置。
以上就是關于jquery滑動背景的相關知識,希望能夠幫助到大家。