Christmas Merry Christmas adds a romantic snowing effect to the blog based on jquery

Christmas Merry Christmas adds a romantic snowing effect to the blog based on jquery_jquery

WBOY

Release： 2016-05-16 17:45:21

Original

1370 people have browsed it

The annual Christmas is here again. First of all, I wish you all good luck, health all year round, and peace forever! On this special day, there is a festive atmosphere everywhere, and the snowflakes falling in the sky make it even more romantic! Today I will teach you how to add a swirling snow effect to your blog. Is it snowing where you are today?

First introduce the jQuery library and jQuery.snow.js (or use the compressed version jQuery.snow.min.js) on the page:

Copy the code The code is as follows:

Friends of Blog Park don’t need to introduce jQuery, because Blog Park itself has already introduced it. Friends who are not in the blog garden can also use jQuery provided by Goolgle CDN:

Copy the code The code is as follows:

Then just call the snow plug-in anywhere in the page document:

Copy the code The code is as follows:

 
<script> <br>$(document).ready( function(){ <br>$.fn.snow( ); <br>}); <br></script> 

You can also set the parameters provided by the plug-in to adjust the snowing effect according to your own preferences:

Copy code The code is as follows:

 
minSize /* Minimum size of snowflakes, default value 10 */ 
maxSize / * The minimum size of snowflakes, the default value is 20 */ 
newOn /* The frequency of snowflakes appearing per millisecond, the default value is 500 */ 
flakeColor /* The color of snowflakes, the default value is white #FFFFFF */ 
 

For example, you can pass parameters in the following form:

Copy code The code is as follows:

 
$.fn.snow({ 
minSize: 5, 
maxSize: 50, 
newOn: 1000, 
flakeColor: '#0099FF' 
}); 

newOn The smaller the parameter value, the better the effect. However, if it is set too small, there may be performance problems and it will consume more resources.

Finally, I would like to briefly introduce to you the key points of realizing this snow effect:
Use the character ❄ as a snowflake. The Unicode encoding is: ❄, so the size and color control of the snowflake are actually Set the font-size and color properties.
Use setInterval to generate snowflakes periodically, and use newOn to control the frequency.

The following is the complete code of the snow plug-in:

Copy the code The code is as follows:

(function($){
$.fn.snow = function(options){
var $flake = $('

').css({'position': 'absolute', 'top': '-50px'}).html('❄'),
documentHeight = $(document).height(),
documentWidth = $(document).width(),
defaults = {
minSize : 10,
maxSize : 20,
newOn : 500,
flakeColor : "#FFFFFF"
} ,
options = $.extend({}, defaults, options);
var interval = setInterval( function(){
var startPositionLeft = Math.random() * documentWidth - 100,
startOpacity = 0.5 Math.random(),
sizeFlake = options.minSize Math.random() * options.maxSize,
endPositionTop = documentHeight - 40,
endPositionLeft = startPositionLeft - 100 Math.random() * 200 ,
durationFall = documentHeight * 10 Math.random() * 5000;
$flake
.clone()
.appendTo('body')
.css(
{
left: startPositionLeft,
opacity: startOpacity,
'font-size': sizeFlake,
color: options.flakeColor
}
)
.animate(
{
top: endPositionTop,
left: endPositionLeft,
opacity: 0.2
},
durationFall,
'linear',
function() {
$(this ).remove()
}
);
}, options.newOn);
};
})(jQuery);

Friends in the garden just need to add the following code to (Management->Settings->Footer HTML code), it’s not easy!

Warm reminder: Because it will be escaped, add a space to the snowflake encoding here. When using it, remember to remove the space between & # in html('& #10052;') .

Copy code The code is as follows:

 
<script> <br>(function($) {$.fn.snow=function(options){var $flake=$('<div id="flake" />').css({'position':'absolute','top':'- 50px'}).html('& #10052;'),documentHeight=$(document).height(),documentWidth=$(document).width(),defaults={minSize:10,maxSize:20,newOn: 500,flakeColor:"#FFFFFF"},options=$.extend({},defaults,options);var interval=setInterval(function(){var startPositionLeft=Math.random()*documentWidth-100,startOpacity=0.5 Math .random(),sizeFlake=options.minSize Math.random()*options.maxSize,endPositionTop=documentHeight-40,endPositionLeft=startPositionLeft-100 Math.random()*200,durationFall=documentHeight*10 Math.random()* 5000;$flake.clone().appendTo('body').css({left:startPositionLeft,opacity:startOpacity,'font-size':sizeFlake,color:options.flakeColor}).animate({top:endPositionTop, left:endPositionLeft,opacity:0.2},durationFall,'linear',function(){$(this).remove()});},options.newOn);};})(jQuery); <br>$. fn.snow({ minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '#FFF' }); <br></script> 