下面這些簡(jiǎn)單的小技巧能夠幫助你玩轉(zhuǎn)jQuery。
1、返回頂部按鈕
通過使用jQuery中的animate 和scrollTop 方法,不用插件就可以創(chuàng)建一個(gè)滾動(dòng)到頂部的簡(jiǎn)單動(dòng)畫:
// Back to top
$('.top').click(function (e) {
e.preventDefault();
$('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<a class="top" href="#">Back to top</a>
改變scrollTop 的值可以更改你想要放置滾動(dòng)條的位置。所有你真正需要做的是在800毫秒的時(shí)間內(nèi)設(shè)置文檔主體的動(dòng)畫,直到它滾動(dòng)到文檔的頂部。
注:小心scrollTop的一些錯(cuò)誤行為。
2、預(yù)加載圖像
如果你的網(wǎng)頁(yè)要使用大量開始不可見的(例如,懸停的)圖像,那么可以預(yù)加載這些圖像:
$.preloadImages = function () {
for (var i = 0; i < arguments.length; i++) {
$('<img>').attr('src', arguments[i]);
}
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');