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

Source: Internet
Author: User

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>

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.