jquery實(shí)現(xiàn)漫天雪花飛舞的圣誕祝福雪花效果代碼分享
這是一款基于jquery實(shí)現(xiàn)的漫天雪花飛舞的圣誕祝福雪花效果代碼,雪花的大小可以進(jìn)行切換,用戶還可以更改背景圖片,是一款非常實(shí)用的幻燈片特效源碼。
漫天雪花飛舞的jquery圣誕祝福雪花效果,集中不同的效果可以點(diǎn)擊選擇,請(qǐng)欣賞。
效果演示 源碼下載(瀏覽器中如果不能正常運(yùn)行,可以嘗試切換瀏覽模式或者選擇直接下載)
為大家分享的漫天雪花飛舞的jquery圣誕祝福雪花效果代碼如下
<!DOCTYPE html> <html> <head> <script type="text/javascript" src="images/jquery-latest.min.js"></script> <script src='images/snowfall.jquery.js'></script> <link rel="stylesheet" href="images/styles.css"></link> </head> <body class="darkBg"> <input type="button" id="clear" value="Click to clear"/> <input type="button" id="round" value="Rounded"/> <input type="button" id="shadows" value="Shadows"/> <input type="button" id="roundshadows" value="Rounded Shadows"/> <input type="button" id="deviceorientation" value="Deviceorientation"/> <div class="collectonme"> <p>Collect on meeeeee!!!</p> </div> <div class="collectonme"> <p>Collect on meeeeee!!!</p> </div> <div class="collectonme"> <p>Collect on meeeeee!!!</p> </div> </body> <script type='text/javascript'> $(document).ready(function(){ $('.collectonme').hide(); //Start the snow default options you can also make it snow in certain elements, etc. $(document).snowfall(); $("#clear").click(function(){ $(document).snowfall('clear'); // How you clear }); $("#round").click(function(){ document.body.className = "darkBg"; $('.collectonme').hide(); $(document).snowfall('clear'); $(document).snowfall({round : true, minSize: 5, maxSize:8}); // add rounded }); $("#shadows").click(function(){ document.body.className = "lightBg"; $('.collectonme').hide(); $(document).snowfall('clear'); $(document).snowfall({shadow : true, flakeCount:200}); // add shadows }); $("#roundshadows").click(function(){ document.body.className = "lightBg"; $('.collectonme').hide(); $(document).snowfall('clear'); $(document).snowfall({shadow : true, round : true, minSize: 5, maxSize:8}); // add shadows }); $("#deviceorientation").click(function(){ $(document).snowfall('clear'); $('.collectonme').hide(); document.body.className = "darkBg"; $(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8}); }); }); </script> <p align="center"><font color="#FFFFFF">來源:</font><a href="http://www.dbjr.com.cn/" target="_blank"><font color="#FFFFFF">腳本之家</font></a></p> </html>
以上就是為大家分享的漫天雪花飛舞的jquery圣誕祝福雪花效果代碼,希望大家可以喜歡。
- canvas雪花效果核心代碼分享
- Canvas實(shí)現(xiàn)動(dòng)態(tài)的雪花效果
- android自定義view實(shí)現(xiàn)圓周運(yùn)動(dòng)
- Android自定義view實(shí)現(xiàn)輸入框效果
- Android自定義View實(shí)現(xiàn)雪花特效
- Android自定義view之太極圖的實(shí)現(xiàn)教程
- Android自定義View實(shí)現(xiàn)分段選擇按鈕的實(shí)現(xiàn)代碼
- Android自定義View圓形圖片控件代碼詳解
- Android自定義View實(shí)現(xiàn)跟隨手指移動(dòng)的小兔子
- Android自定義view實(shí)現(xiàn)倒計(jì)時(shí)控件
- Android如何用自定義View實(shí)現(xiàn)雪花效果
相關(guān)文章
jQuery用noConflict代替$的實(shí)現(xiàn)方法
下面小編就為大家?guī)硪黄猨Query用noConflict代替$的實(shí)現(xiàn)方法。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-04-04javascript的變量、傳值、傳址、參數(shù)之間關(guān)系
這篇文章主要介紹了javascript的變量、傳值、傳址、參數(shù)之間關(guān)系的相關(guān)資料,需要的朋友可以參考下2015-07-07jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作
這篇文章主要介紹了jQuery對(duì)checkbox 復(fù)選框的全選全不選反選的操作 的相關(guān)資料,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2016-08-08jquery使用echarts實(shí)現(xiàn)有向圖可視化功能示例
這篇文章主要介紹了jquery使用echarts實(shí)現(xiàn)有向圖可視化功能,結(jié)合完整實(shí)例形式分析了jquery的echarts.js插件實(shí)現(xiàn)有向圖可視化相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-11-11JS拖動(dòng)選擇table里的單元格完整實(shí)例【基于jQuery】
這篇文章主要介紹了JS拖動(dòng)選擇table里的單元格,結(jié)合完整實(shí)例形式分析了基于jQuery的table表格動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,涉及事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作使用方法,需要的朋友可以參考下2019-05-05jquery在項(xiàng)目中做復(fù)選框時(shí)遇到的一些問題筆記
在實(shí)踐中還是遇到了很多的問題,注意在input的checkbox中,用普通的attr屬性來判斷是不可以的,因?yàn)閏hecked的值是checked,因此做個(gè)筆記2013-11-11JQuery跨Iframe選擇實(shí)現(xiàn)代碼
JQuery跨Iframe選擇實(shí)現(xiàn),下面也通過用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了,需要的朋友可以參考下。2010-08-08jQuery實(shí)現(xiàn)的表頭固定效果實(shí)例【附完整demo源碼下載】
這篇文章主要介紹了jQuery實(shí)現(xiàn)的表頭固定效果,結(jié)合完整實(shí)例形式分析了jQuery基于插件實(shí)現(xiàn)的表頭固定功能與用法,非常簡單實(shí)用,需要的朋友可以參考下2016-08-08