圣诞节雪花飘落jQuery特效js代码

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

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

以下是圣诞节雪花飘落jQuery特效js代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>ʥ����ѩ��Ʈ��jQuery��Ч</title>
    <script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="js/christmassnow.js"></script>
    <script>
        $(document).ready(function () {
            $('body').christmassnow({
                snowflaketype: 23, // 1 to 25 types of flakes are available change the number from 1 to 25. each one contain different images.
                snowflakesize: 2, //snowflakesize is 1 then it get the size of the image as random , if the snowflakesize is 2 means size of the image as custom
                snowflakedirection: 1, // 1 means default no wind (top to bottom), 2 means random, 3 means left to right and 4 means  right to left
                snownumberofflakes: 4, // number of flakes is user option
                snowflakespeed: 10, // falling speed of flake 10 sec is default
                flakeheightandwidth: 15 // if you are mention that option flakesize is 2 then this flakeheightandwidth should work values are in pixels 16*16.
            });
        });
    </script>
    <style type="text/css">
        body {
            width: 100%;
            height: 100%;
            background: url('assets/background.jpg');
        }
    </style>
</head>
<body>
    <div class="drop">
    </div>
</body>
</html>

JS代码(christmassnow.js):

// $Christmas Snow jQuery v1.1 jQuery Plugin// Author:FantasticPlugins// Website:www.fantasticplugins.com | Exclusive to:http://www.codecanyon.net// *********************************************************************************************(function($){
	$.fn.christmassnow = function(options){
	// Establish our default settings var settings = $.extend({
	snowflaketype:null,snowflakesize:null,snowflakedirection:null,snownumberofflakes:null,snowflakespeed:null,snowflakemovement:top,flakeheightandwidth:null}
,options);
	this.each(function(){
	var windowHeight = jQuery(window).height();
	var snowDisappear = (windowHeight * '100') / 100;
	var drop = jQuery('.drop').detach();
	var snowTop = Math.floor(Math.random() * (windowHeight));
	snowTop = 0;
	var header = document.getElementsByTagName("head")[0];
	$(header).append('<style type="text/css">.drop{
	position:fixed;
	color:#fff;
	z-index:999999;
}
</style>');
	function create(){
	var number1 = 1 + Math.floor(Math.random() * 4);
	var number2 = 5 + Math.floor(Math.random() * 4);
	var number3 = 9 + Math.floor(Math.random() * 4);
	var number4 = 13 + Math.floor(Math.random() * 4);
	var number5 = 17 + Math.floor(Math.random() * 4);
	var content;
	// alert(imageSize);
	if (settings.snowflakesize === 1){
	var imageSize = Math.floor(Math.random() * 30);
}
else{
	var imageSize = settings.flakeheightandwidth;
}
if (settings.snowflakesize === 1){
	if (imageSize > 15){
	var customsize = settings.snowflakespeed * 1000;
}
else{
	var customsize = settings.snowflakespeed * 1200;
}
}
else{
	var customsize = settings.snowflakespeed * 1200;
}
if (settings.snowflakedirection === 3){
	var direction = "right";
}
else{
	var direction = "left";
}
for (var i = 1;
	i <= 25;
	i++){
	if (settings.snowflaketype === i){
	if (i === 21){
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="../images/snowflake' + number1 + '.png"/>'}
else if (i === 22){
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="images/snowflake' + number2 + '.png"/>'}
else if (i === 23){
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="images/snowflake' + number3 + '.png"/>'}
else if (i === 24){
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="images/snowflake' + number4 + '.png"/>'}
else if (i === 25){
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="images/snowflake' + number5 + '.png"/>'}
else{
	content = '<img class="flakeimage" style="height:' + imageSize + 'px;
	width:' + imageSize + 'px;
	"src="images/snowflake' + i + '.png"/>'}
var movement = settings.snowflakemovement;
	var clone = drop .clone() .appendTo('body') .css(direction,Math.random() * jQuery(window).width() - 20) .css('top',snowTop) .html(content) .animate({
	top:jQuery(window).height() - 80}
,{
	duration:customsize,complete:function(){
	jQuery(this).fadeOut(200,function(){
	jQuery(this).remove();
}
);
}
,step:function(fallingSpeed){
	var fallingSpeed = Math.floor(Math.random() * 5 + 1);
	var movingDirection = Math.floor(Math.random() * 2);
	var currentTop = parseInt(jQuery(this).css('top'));
	var currentLeft = parseInt(jQuery(this).css('left'));
	var currentRight = parseInt(jQuery(this).css('right'));
	// jQuery(this).css('top',currentTop + fallingSpeed);
	//alert(currentRight);
	// //alert(movingDirection);
	if (settings.snowflakedirection === 1){
	if (movingDirection === 0){
	jQuery(this).css('bottom',currentLeft + fallingSpeed);
}
else{
	// set the snow move to left jQuery(this).css('bottom',currentLeft + -(fallingSpeed));
}
}
if (settings.snowflakedirection === 2){
	if (movingDirection === 0){
	jQuery(this).css('left',currentLeft + fallingSpeed);
}
else{
	// set the snow move to left jQuery(this).css('left',currentLeft + -(fallingSpeed));
}
}
if (settings.snowflakedirection === 3){
	if (movingDirection === 0){
	console.log(currentRight);
	jQuery(this).css('right',currentRight);
}
else{
	// set the snow move to left jQuery(this).css('right',currentRight + -(fallingSpeed));
}
}
if (settings.snowflakedirection === 4){
	if (movingDirection === 0){
	jQuery(this).css('left',currentLeft);
}
else{
	// set the snow move to left jQuery(this).css('left',currentLeft + -(fallingSpeed));
}
}
}
}
);
}
}
}
function makeflake(){
	for (var j = 0;
	j < settings.snownumberofflakes;
	j++){
	setTimeout(create,Math.random() * 5000);
}
}
setInterval(makeflake,2000);
}
);
}
;
}
(jQuery));

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