Let your blog drift snowflakes beyond the screen still see _jquery

Source: Internet
Author: User
A few days ago, in the garden to see your blog Snow flower articles, hurriedly get their own blog to see the effect, don't say, is really beautiful ah. But after watching for a while, I found the page became a special card.

After looking at the code found that the original author is in the body constantly inserting a number of small div snowflakes to slowly drift downward, has been drifting to the bottom of the body, the snowflakes removed.

But, in fact, the page beyond the screen we can not see, even if there is snow in the drift and what is the significance of it.
So, the original code slightly modified, so that he just from the top of the screen to fall to the bottom of the screen (not the body of the bottom), will remove snowflakes, and then change the snow to fixed positioning.

Refreshing the page, it's much better. Now the revision code posted out to share with you.
PS. Original author Link I didn't find it, copyright belongs to original author all:)
Copy Code code as follows:

(function ($) {
$.fn.snow=function (options) {
var $flake =$ (' <div/> ')
. css ({
' Position ': ' fixed ',//' absolute ',
' Top ': ' -50px ',
' Z-index ': ' 1000 '
})
. html (' ❄ ');
var documentheight=document.documentelement.clientheight;//$ (document). Height ();
var documentwidth=$ (document). width ();
var defaults={minsize:10,maxsize:20,newon:500,flakecolor: "#FFFFFF"};
var options=$.extend ({},defaults,options);
var interval=setinterval (function () {
var startpositionleft=math.random () *documentwidth-100;
var startopacity=0.5+math.random ();
var sizeflake=options.minsize+math.random () *options.maxsize;
var endpositiontop=documentheight-40;
var endpositionleft=startpositionleft-100+math.random () *200;
var 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);//interval End
};//$.fn.snow End
}) (JQuery);
$.fn.snow ({minsize:10, maxsize:60, newon:800, Flakecolor: ' #ccc '});

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.