溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了jQuery如何實現雪花飄落效果，內容簡而易懂，希望大家可以學習一下，學習完之后肯定會有收獲的，下面讓小編帶大家一起來看看吧。
效果展示：
源碼展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery實現雪花飄落</title>
<script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
<style>
* {
margin:0px;
padding:0px;
}
body {
position:relative;
height:1000px;
width:100%;
overflow:hidden;
background-color: #666;
}
span {
display:block;
opacity:0.7;
}
</style>
</head>
<body>
<script>
$(function() {
setInterval(function() {
var maxW = document.body.clientWidth,
maxH = document.body.clientHeight,
left = Math.random() * maxW,
bottom = left - (Math.random() - 0.5) * 0.2 * maxW, //保證落下的位置水平有變化，但不大
opacity = 0.7 + 0.3 * Math.random();
speed = 30;
size = 20 + 10 * Math.random(), //字體20-30
color = '#fff';
// num = Math.floor(Math.random() * 10) //產生0-9隨機數，當然你們可以自己設置
num ='*';
var style = 'position:absolute;top:0px;font-size:' + size + 'px;color:' + color + ';left:' + left + 'px;opacity:' + opacity;
var div = '<span class = "dd" >' + num + '</span>'
$('body').append(div)
$('span').animate({
top: maxH,
left: bottom
}, 3000, function() {
$(this).remove() //這一步很關鍵，要把落下的去掉，不然會越積越多
});
}, 20) //20ms產生一個
})
</script>
<pre >
感： 最近貢獻一下我在教學中的小案例
希望能給你一些幫助 ,希望大家繼續關注我的博客
--王
</pre>
</body>
</html>以上就是關于jQuery如何實現雪花飄落效果的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
