jQuery是一款非常流行的JavaScript庫，可以輕松處理HTML文檔的各種操作。本文將重點介紹使用jQuery實現(xiàn)div跟隨彈出的效果。

首先，我們需要在HTML文件中添加一個“觸發(fā)器”按鈕，以便點擊后出現(xiàn)彈出框。接下來，在JavaScript文件中使用jQuery選擇器選擇該按鈕，并添加一個click事件。當(dāng)按鈕被點擊時，使用jQuery選取要彈出的div，并使用show()方法將其顯示出來。如果需要指定彈出div的位置，可以使用css方法對其進(jìn)行位置和尺寸的調(diào)整。

$('button').click(function(){
$('.pop-up').show().css({
'position' : 'absolute',
'top' : '50%',
'left' : '50%',
'transform' : 'translate(-50%, -50%)',
'width' : '400px',
'height' : '300px',
'background-color' : '#fff',
'box-shadow' : '0 0 10px rgba(0, 0, 0, 0.5)',
'border-radius' : '10px',
'padding' : '20px',
'z-index' : '999'
});
});

上述代碼中的$('.pop-up')指的是我們要彈出的div，該div的類名為pop-up。在css方法中，我們分別設(shè)置了該div的位置、尺寸、背景顏色、陰影效果、圓角大小、填充和層級等屬性。其中，'transform' : 'translate(-50%, -50%)'則是將div的水平和垂直位置調(diào)整到居中的位置。

此時彈出框已經(jīng)可以正常顯示，但如果想要實現(xiàn)div跟隨按鈕彈出，需要添加一些額外的代碼。首先，我們需要在彈出框中添加一個關(guān)閉按鈕，以便用戶可以手動關(guān)閉彈出框。其次，需要在觸發(fā)器按鈕中添加一個data屬性，用來存儲彈出框的ID。接著，需要添加一個mousemove事件，用來監(jiān)聽鼠標(biāo)的移動。當(dāng)鼠標(biāo)移動時，使用offset()方法獲取觸發(fā)器按鈕的位置，再使用css()方法對彈出框的位置進(jìn)行調(diào)整。

$('button').click(function(){
var pop_id = $(this).data('pop-id');
$('#' + pop_id).show().css({
//...
});
});
$('.pop-up .close').click(function(){
$(this).parent().hide();
});
$(document).mousemove(function(event){
var x = event.pageX,
y = event.pageY;
$('.pop-up:visible').each(function(){
var pop_w = $(this).outerWidth(),
pop_h = $(this).outerHeight(),
pop_x = $(this).offset().left,
pop_y = $(this).offset().top;
if(x< pop_x || x >pop_x + pop_w || y< pop_y || y >pop_y + pop_h){
$(this).hide();
}else{
var o_x = x - pop_w / 2,
o_y = y + 20;
$(this).css({
'top' : o_y + 'px',
'left' : o_x + 'px'
});
}
});
});

上述代碼中，$(this).data('pop-id')用來獲取觸發(fā)器按鈕中存儲的彈出框ID，'$('.pop-up .close').click()'監(jiān)聽關(guān)閉按鈕的click事件，$(document).mousemove()監(jiān)聽鼠標(biāo)移動事件，以此來實現(xiàn)div跟隨彈出的效果。

至此，我們就成功地使用了jQuery實現(xiàn)了div跟隨彈出的效果。這種效果可以很好地提升網(wǎng)站的用戶體驗，值得開發(fā)者們學(xué)習(xí)和借鑒。