jQuery實現雪花飄落效果
阿新 • • 發佈：2020-08-03
本文例項為大家分享了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" style="' + style + '">' + num + '</span>'
$('body').append(div)
$('span').animate({
top: maxH,left: bottom
},3000,function() {
$(this).remove() //這一步很關鍵，要把落下的去掉，不然會越積越多
});
},20) //20ms產生一個
})
</script>
<pre style="color:red">
感： 最近貢獻一下我在教學中的小案例
希望能給你一些幫助,希望大家繼續關注我的部落格
--王
</pre>
</body>
</html>以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支援我們。