懸浮廣告是指在網頁中，當用戶將鼠標移動到特定位置時，會出現一幅圖片或者廣告信息來引導用戶進行操作。在現今的網頁中，懸浮廣告的效果已經被越來越多的網站采用，使得廣告營銷的效果得到了不小的提升。

為了實現這種效果，我們需要使用css、js等技術來進行操作。其中，我們可以使用css來設置廣告的樣式和位置，這需要設置position為fixed并設置top和left的值。然后，我們可以使用js來監聽鼠標的移動事件，判斷用戶當前的位置是否在廣告的區域內，如果是，則顯示廣告，如果不是，則關閉廣告。

// css樣式設置
.advertisement {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
opacity: 0;
}
// js操作
var advertisement = document.querySelector('.advertisement');
window.addEventListener('mousemove', function(e) {
if(e.clientX >(window.innerWidth * 0.8) && e.clientY >(window.innerHeight * 0.8)) {
advertisement.style.opacity = '1';
} else {
advertisement.style.opacity = '0';
}
})

還有一種情況，就是當用戶購物車上有商品時，懸浮廣告會顯示一些優惠信息，引導用戶進行購買。這種情況下，我們需要將用戶的購物車信息傳遞到后端，在后端進行計算然后返回給前端。然后，我們可以利用js將這些信息插入到廣告中進行展示。

// js操作
var advertisement = document.querySelector('.advertisement');
window.addEventListener('mousemove', function(e) {
// ajax請求獲取購物車信息
// ...
var data = {};
data.cartNumber = 5;
data.saveMoney = 20;
if(e.clientX >(window.innerWidth * 0.8) && e.clientY >(window.innerHeight * 0.8)) {
// 插入購物車信息到懸浮廣告中
advertisement.querySelector('.cart-number').innerText = data.cartNumber;
advertisement.querySelector('.save-money').innerText = data.saveMoney;
advertisement.style.opacity = '1';
} else {
advertisement.style.opacity = '0';
}
})

通過以上的操作，我們可以輕松實現一個簡單的懸浮廣告效果。不過需要注意的是，在設計中要遵循一定的規律，不能隨意干擾用戶瀏覽體驗，以避免用戶流失。