JQuery許愿動漫特效源碼是一個非常酷炫的特效,適用于添加在網站或者博客中,讓你的網頁更加生動有趣,增加用戶的體驗感和留存率。今天,我們來分享一下這個特效的源碼。
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<style>
.wish {font-size: 50px; position: absolute;}
</style>
</head>
<body>
<button id="wishbtn">許愿</button>
<script>
$("#wishbtn").click(function() {
var wish = prompt("許愿吧!");
if(wish != null) {
var wishElem = $(<div class="wish">${wish}</div>
);
$("body").append(wishElem);
animateWish(wishElem);
}
});
function animateWish(elem) {
var x = Math.floor(Math.random() * $(document).width());
var y = Math.floor(Math.random() * $(document).height());
var endX = Math.floor(Math.random() * $(document).width());
var endY = Math.floor(Math.random() * $(document).height());
elem.css("left", x);
elem.css("top", y);
elem.animate({
left: endX,
top: endY
}, 2000, function() {
elem.remove();
});
}
</script>
</body>
</html>
以上是JQuery許愿動漫特效的源碼。整體而言,代碼比較簡單,主要是使用JQuery實現許愿效果。用戶點擊“許愿”按鈕后,會彈出一個對話框,讓用戶輸入許愿內容。然后,通過Javascript的隨機函數,生成動畫效果,讓許愿的元素在頁面上隨機移動。
通過加入這個特效,可以吸引用戶的眼球,讓他們更加享受瀏覽的過程。如果你想要添加額外特效或者改進這個特效,也可以根據需要作出調整。希望大家喜歡這個特效,并可以用它創建更加有趣的網站頁面。