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