jQuery 鼠標(biāo)滾動(dòng)預(yù)覽高圖片是一種常見(jiàn)的網(wǎng)頁(yè)設(shè)計(jì)效果，可以有利于網(wǎng)站用戶更快速地了解頁(yè)面內(nèi)容。下面我們來(lái)介紹一下如何使用 jQuery 實(shí)現(xiàn)這個(gè)效果。

$(document).ready(function() { 
/* 滑過(guò)每個(gè)縮略圖時(shí)，顯示相應(yīng)的大圖 */
$('.thumbnail').hover(
function() {
$(this).css('cursor','pointer');
$(this).addClass('hover');
$(this).find('img').addClass('hover');
$(this).find('.overlay').show();
},
function() {
$(this).css('cursor','auto');
$(this).removeClass('hover');
$(this).find('img').removeClass('hover');
$(this).find('.overlay').hide();
}
);
/* 滾動(dòng)鼠標(biāo)時(shí)，預(yù)覽大圖 */
$(window).scroll(function() {
var scrollPosition = $(window).scrollTop();
$('.thumbnail').each(function() {
var thumbnailPosition = $(this).offset().top;
if(thumbnailPosition<= scrollPosition) {
$(this).addClass('active').siblings().removeClass('active');
var bigImageUrl = $(this).find('a').attr('href');
$('#big-image').attr('src',bigImageUrl);
}
});
});
});

代碼中我們定義了兩個(gè)事件，hover 和 scroll，hover 用來(lái)實(shí)現(xiàn)當(dāng)鼠標(biāo)滑過(guò)縮略圖時(shí)，顯示相應(yīng)的大圖，并展示文本信息。scroll 用來(lái)實(shí)現(xiàn)鼠標(biāo)滾動(dòng)時(shí)的預(yù)覽效果。我們通過(guò) jQuery 的 each() 方法遍歷每個(gè)縮略圖，當(dāng)縮略圖的位置小于等于滾動(dòng)條的位置時(shí)，就將其高亮并顯示對(duì)應(yīng)的大圖。