色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

jquery表白煙花動畫

劉海燕1年前6瀏覽0評論

最近,我發現了一種非常有趣的jQuery表白煙花動畫效果,它能讓你的表白更加生動有趣。這個效果是由jQuery的動畫庫和一些簡單的JavaScript代碼組成的。

$(function() {
// 獲取屏幕寬高
var screenWidth = $(window).width(),
screenHeight = $(window).height();
// 循環添加煙花元素
for (var i = 0; i < 10; i++) {
$("<div/>").addClass("firework").appendTo($(".fireworkBox"));
}
// 煙花爆炸動畫 
function fireworkAnimate() {
$(".firework").each(function(index, el) {
var $this = $(this);
// 爆炸后的煙花顏色隨機
$this.css("background-color", ranColor());
// 煙花運動軌跡隨機
var x = Math.random() * screenWidth * 0.8 + screenWidth * 0.1,
y = Math.random() * screenHeight * 0.8 + screenHeight * 0.1 - 100;
// 煙花上升運動
$this.animate({
"top": y + "px",
"opacity": 1
}, 2000);
// 煙花爆炸效果
setTimeout(function() {
$this.addClass("explode");
// 煙花隕落效果
setTimeout(function() {
$this.remove();
}, 1000);
}, 2000)
});
}
// 生成隨機顏色函數
function ranColor() {
var r = Math.floor(Math.random() * 256),
g = Math.floor(Math.random() * 256),
b = Math.floor(Math.random() * 256);
return "rgb(" + r + "," + g + "," + b + ")";
}
// 開始煙花動畫
function startAnimate() {
setInterval(fireworkAnimate, 500);
}
startAnimate();
});

這段代碼利用jQuery的animate()方法和setTimeout()方法實現了煙花動畫的效果,同時添加了一個生成隨機顏色的函數,讓煙花的顏色更加生動有趣。你只需要將這段代碼添加到你的HTML文件中,然后在頁面中添加一個class為fireworkBox的空div元素即可。

使用這種動畫效果進行表白,相信一定會讓你的對象感到非常驚喜與開心。趕快試一試吧!