Christmas Merry Christmas adds romantic snow effects to blogs Based on jquery

The annual Christmas has arrived again. First of all, we wish you good luck in a string. You will be safe forever in a year of health! On this special day, the festive atmosphere is everywhere, and the snow falling in the air is more romantic! Today, we will teach you how to add the surging snow effect to your blog. Today, are you snowing there?

First, introduce the jQuery library and jQuery. snow. js (or use the compressed jQuery. snow. min. js) on the page ):
Copy codeThe Code is as follows:
<Script src = "jquery. js"> </script>
<Script src = "jquery. snow. js"> </script>

Friends in the blog Park do not need to introduce jQuery, because the blog park itself has already introduced jQuery. If you are not a blogger, you can also reference jQuery provided by Goolgle CDN:
Copy codeThe Code is as follows:
<Script src = "https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"> </script>
<Script src = "jquery. snow. js"> </script>

Then you can call the snow plug-in anywhere in the page document:
Copy codeThe Code is as follows:
<Script>
$ (Document). ready (function (){
$. Fn. snow ();
});
</Script>

You can also set the parameters provided by the plug-in to adjust the snow effect based on your preferences:
Copy codeThe Code is as follows:
MinSize/* Minimum snowflake size, default value: 10 */
MaxSize/* Minimum snowflake size, default value: 20 */
NewOn/* the frequency of snowflake appearance per millisecond. The default value is 500 */
FlakeColor/* snowflake color. The default value is white # FFFFFF */

For example, you can pass the following parameters:
Copy codeThe Code is as follows:
$. Fn. snow ({
MinSize: 5,
MaxSize: 50,
NewOn: 1000,
FlakeColor: '# 0099FF'
});

The smaller the value of newOn, the better the effect. However, if the value is set too small, it may cause performance problems and consume resources.

Finally, I would like to briefly introduce the main points of implementation of this snow effect.:
Characters Used❄As a snowflake, Unicode encoding is:❄Therefore, the font-size and color attributes are set for the snowflake size and color control.
Use setInterval to periodically generate snow. Use newOn to control the frequency.

The complete code for the snow plug-in is as follows::
Copy codeThe Code is as follows:
(Function ($ ){
$. Fn. snow = function (options ){
Var $ flake = $ ('<div id = "flake"/> 'salary .css ({'position': 'absolute', 'top': '-50px'salary limit .html ('❄'),
Required entheight = $ (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 = incluentheight-40,
EndPositionLeft = startPositionLeft-100 + Math. random () * 200,
DurationFall = optional entheight * 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 );

A friend in the garden just needs to add the following code to (Management-> Settings-> footer HTML code), which is not simple!

Tip: It will be escaped. Here we add a space to the snowflake code. When using it, remember to remove the Space & # in html ('& #10052.
Copy codeThe Code is as follows:
<Script>
(Function ($) {$. fn. snow = function (options) {var $ flake = $ ('<div id = "flake"/> 'salary .css ({'position': 'absolute', 'top ': '-50px'{}.html ('& #10052;'), encryption entheight = $ (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 = random entheight * 10 + Math. random () * 5000100000000flake.clone().appendto('body'0000.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 );
$. Fn. snow ({minSize: 5, maxSize: 50, newOn: 1000, flakeColor: '# fff '});
</Script>