jQuery實現(xiàn)雪花飄落效果
更新時間：2020年08月02日 14:36:59 作者：Mr.王征
這篇文章主要為大家詳細介紹了jQuery實現(xiàn)雪花飄落效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了jQuery實現(xiàn)雪花飄落效果的具體代碼，供大家參考，具體內容如下
效果展示：
源碼展示：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jquery實現(xiàn)雪花飄落</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隨機數(shù)，當然你們可以自己設置
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">
感： 最近貢獻一下我在教學中的小案例
希望能給你一些幫助 ,希望大家繼續(xù)關注我的博客
--王
</pre>
</body>
</html>
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
jQuery基礎的工廠函數(shù)以及定時器的經典實例分析
下面小編就為大家?guī)硪黄猨Query基礎的工廠函數(shù)以及定時器的經典實例分析。小編覺得挺不錯的，現(xiàn)在2016-05-05
在不適用錨點的情況下也可以平滑滾動到頁面的指定位置，看樣子還不錯嗎，具體處理程序如下，感興趣的朋友可以參考下哈，希望對你有所幫助2013-05-05
這篇文章主要為大家詳細介紹了jquery鼠標懸停導航下劃線滑出效果，菜單鼠標懸停出現(xiàn)下劃線，向兩邊擴展的效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-09-09
jquery其實本身的事件機制就很完善了，包括了單擊，雙擊，鼠標移入，鼠標移出等。但是卻少了一個做事件。就是鼠標右擊事件。當然大家也是直接用偵聽鼠標按下事件，然后通過if來判斷執(zhí)行相應的函數(shù)。造成鼠標右擊事件的效果2011-12-12
基于jQuery實現(xiàn)仿搜狐辯論投票動畫代碼(附源碼下載)
這篇文章主要介紹了基于jQuery實現(xiàn)仿搜狐辯論投票動畫代碼 的相關資料,需要的朋友可以參考下2016-02-02
jQuery實現(xiàn)頁面滾動時層智能浮動定位實例探討
在博客或者微博上面也會見到這個效果，所以客戶就也想要這樣的效果了，接下來為大家詳細介紹下浮動定位實現(xiàn)的過程，感興趣的朋友可以參考下哈2013-03-03
這篇文章主要介紹了jQuery EasyUI Tab 選項卡問題小結,在項目開發(fā)階段很多朋友都遇到過此問題，其實解決辦法很簡單的，下面小編給大家分享下問題原因及解決辦法，需要的朋友可以參考下2016-08-08
冒泡事件就是點擊子節(jié)點，會向上觸發(fā)父節(jié)點，祖先節(jié)點的點擊事件。本文主要介紹JQuery阻止事件冒泡的實例解析。需要的朋友來看下吧2016-12-12
對于JQuery是啥東東的描述我在此也就不多說了,哈,如果有興趣的話我相信不會懶的去查吧,哈^^2009-07-07
下面代碼可以把一個頁面容器中的表單元素封裝成一個json對象2013-11-11