jQuery是一種簡潔明了的JavaScript庫，可以輕松實現各種特效。其中，浪漫特效是許多網站愛不釋手的元素。下面我們來看看如何用jQuery實現它。
//浪漫愛心飄落特效
function loveHeart() {
var heart = document.createElement("div");
heart.style.width = "50px";
heart.style.height = "50px";
heart.style.background = "url('heart.png')";
heart.style.position = "fixed";
heart.style.left = Math.random() * 100 + "%";
heart.style.top = "0px";
document.body.appendChild(heart);
animate(heart);
}
function animate(el) {
$(el).animate(
{ top: $(window).height() },
{ duration: Math.random() * 5000 + 5000, complete: function () { $(this).remove(); loveHeart(); } }
);
}
loveHeart();上述代碼實現的是一個浪漫愛心飄落特效。具體實現方式是創建一個
元素作為飄落的愛心，設置寬高和背景圖。然后設置該元素的位置為fixed，隨機設置橫坐標，縱坐標為0。接著，將該元素添加到頁面DOM上，并使用jQuery的animate方法讓它向下飄落，直到窗口底部。最后，當動畫完成時，清除掉當前元素，并重新生成一個新的愛心元素。
//心形文字出現特效
function heartBeat() {
var delay = 0;
$(".heart").each(function () {
var self = this;
setTimeout(function () { $(self).fadeIn(3000); }, delay);
delay += 500;
});
}
heartBeat();上述代碼實現的是一個心形文字出現特效。具體實現方式是先將需要出現的文字轉換成心形，使用CSS樣式將其隱藏，并用class名為"heart"的元素包裹起來。然后用jQuery的each方法遍歷所有的"heart"元素，在一定的時間間隔內讓其逐個淡入顯示。這樣就形成了一個逐漸出現的心形文字特效。
以上就是兩個基于jQuery實現的浪漫特效，它們可以讓網站變得更加生動有趣，并給用戶留下深刻的印象。
下一篇jquery 消息墻