jquery圣诞祝福雪花效果js代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jquery圣诞祝福雪花效果js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!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="collection" value="Snow Collection" />
    <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>
    <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
			});

			$("#collection").click(function(){
				$(document).snowfall('clear');
				document.body.className  = "darkBg";
				$('.collectonme').show();
				$(document).snowfall({collection : '.collectonme', flakeCount : 250});
			});

			$("#deviceorientation").click(function(){
				$(document).snowfall('clear');
				$('.collectonme').hide();
				document.body.className  = "darkBg";
				$(document).snowfall({deviceorientation : true, round : true, minSize: 5, maxSize:8});
			});
		});
    </script>
</body></html>

附件:下载该文件资源,减少时间成本(增值服务)