Some interesting JS mini-animations

1. Click to create a floating red hearts

<script type= "Text/javascript" >varA_idx=0; jQuery (document). Ready (function($) {$ ("body"). Click (function(e) {varA=NewArray ("?", "?", "?", "?", "?", "?", "?", "?", "?", "?", "?", "?"); var$i =$ ("<span></span>"). Text (A[a_idx]); a_idx= (a_idx+1)%a.length; varx=e.pagex,y=E.pagey; $i. css ({"Z-index": 999999999999999999999999999999999999999999999999999999999999999999999, "top": y-20, "left": x-20, " Position ":" Absolute "," font-weight ":" Bold "," Color ":" #6699CC "}); $("Body"). Append ($i); $i. Animate ({"Top": y-180, "opacity": 0},1500,function() {$i. Remove ();}); });});</script>

2. Automatic snow.

<!--snow--><script type= "Text/javascript" >(function($) {$.fn.snow=function(options) {var$flake = $ (' <div id= "flake"/> '). css ({' position ': ' absolute ', ' top ': ' -50px '}). html (' & #x2744; '), Documentheight= $ (document). Height (), documentwidth =$ (document). Width (), Defaults= {minsize:10, maxsize:20, newon:500, Flakecolor: "#FF9900"}, Options=$.extend ({}, defaults, options); varInterval = SetInterval (function () {            varStartpositionleft = 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); $.fn.snow ({minSize:Maxsize:60, newon:1000, Flakecolor: ' #CCCCCC '});</script>

Some interesting JS mini-animations