Christmas Merry Christmas To add a romantic snow effect to the blog based on jquery implementation _jquery

The annual Christmas again, first wish you a string of good luck, healthy year after year, Peace to forever! In this special day, everywhere permeated with the festive atmosphere, the sky falling snowflakes more romantic! Today we are going to teach you how to add a few snow effects to your blog. Did you have snow there today?

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

Copy Code code as follows:

<script src= "Jquery.js" ></script>
<script src= "Jquery.snow.js" ></script>

Blog Park Friends can not introduce jQuery, because the blog itself has been introduced. A friend who is not a blog park can also cite JQuery provided by the Goolgle CDN:

Copy Code code as follows:

<script src= "Https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js" ></script>
<script src= "Jquery.snow.js" ></script>

Then call the snow plugin anywhere on the page document:

Copy Code code 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 according to your preferences:

Copy Code code as follows:

MinSize/* Snowflake minimum size, default value 10 * *
MaxSize/* Snowflake minimum size, default value 20 * *
Newon/* The frequency of snowflakes per millisecond, the default is 500 * *
Flakecolor/* Snowflake color, the default value is white #FFFFFF * *

For example, you can pass parameters such as the following:

Copy Code code as follows:

$.fn.snow ({
Minsize:5,
MAXSIZE:50,
newon:1000,
Flakecolor: ' #0099FF '
});

The smaller the number of Newon parameters, the better the effect, but the set too small may have performance problems, more resource-consuming.

Finally, a brief introduction to the main points of this snow effect：
Using the character ❄ as a snowflake, the Unicode encoding is: ❄, so the size and color control of snowflakes is actually setting the Font-size and Colors properties.
Use SetInterval to generate snowflakes periodically, using Newon control.

here is the complete code for the snow plugin：

Copy Code code as follows:

(function ($) {
$.fn.snow = function (options) {
var $flake = $ (' <div id= ' 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 * + 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 add the following code to the (Admin-"Settings-" footer HTML code), it's not easy!

Warm Tips: Because it is escaped, add a space to the snowflake code, and remember to use the & #间空格去掉啊 of the HTML (' & #10052; ').

Copy Code code as follows:

<script>
(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:o Ptions.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>