Shulou(Shulou.com)06/01 Report--

In this article, the editor introduces in detail "how to use jQuery to achieve snowflake falling effect". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use jQuery to achieve snowflake falling effect" can help you solve your doubts.

Example:

Snowflakes fall body {background: black;height: 100% snowflakes: hidden;} .xh {cursor: pointer;} var minSize = 5; / minimum font var maxSize = 50; maximum font var newOne = 200; / / snowflake interval var flakColor = "# fff"; / / snowflake color var flak = $("). Css ({position:" absolute "," top ":" 0px "}). Html (" ❉ ") / / define a snowflake var dhight = $(window). Height (); / / define the view height var dw = $(window). Width (); / / define the view width setInterval (function () {var sizeflak = minSize+Math.random () * maxSize; / / generate snowflake var startLeft = Math.random () * dw; / / snowflake generation is random var startopcity = 0.7+Math.random () * 0.3 / / Random Transparency var endpositionTop= dhight-100; / / Snowflake stop top position var endLeft= Math.random () * dw; / / Snow stop left position var durationfull = 5000+Math.random () * 3000 / / snowflakes fall at different speeds flak.clone (). AppendTo ($("body")). Css ({"left": startLeft, "opacity": startopcity, "font-size": sizeflak, "color": flakColor}). Animate ({"top": endpositionTop, "left": endLeft, "apacity": 0.1}, durationfull,function () {$(this). Remove ()}) }, newOne)

The above is the code, isn't it very simple, you should say that you can achieve the desired effect? Next, I'll show you the effect.

The above is the effect, you can change the snowflakes into money or other things, the background can also be changed, and then add a picture of Santa Claus, and other things, this is a simple Christmas page, which is actually very cool.

Of course, we can also add some other interactive effects, replace the picture with a small plane, and then make a web game for jerking off, which is actually very simple, just add interaction and some logic to this. Next, I will give you a step-by-step explanation of the whole program design ideas.

Premise summary: I used jq, of course, I can also use native writing, but jq is more convenient, so I used jq.

First of all, introduce jq: this needs to be written according to your own real directory. Pay attention to two points when introducing:

First, remember that the general introduction of the words had better be put at the bottom of the whole page, because the page is loaded from top to bottom when loading, if jq is introduced on the top of the style, it will make the page load slowly and affect the user experience, so putting it below will make loading styles and pictures first, which is beneficial to the user experience.

Second, when introduced, do not put under the dependent jq code, because the page loads from top to bottom, if you put it below, it will make the dependent code can not find jq variables and methods, it will report an error.

Think about the variables you need before you write, and then define the variables:

What we do is snowflake falling, so I use * good instead of snowflake, so we need to know to define a snowflake, var flak = $(""). Css ({position: "absolute", "top": "0px"}). Html ("❉"); / / define a snowflake, and then we need to think about the properties of snowflake and know several attributes of snowflake.

1. We know that the size of snowflakes is different when it snows, so we use a maximum snowflake size and a minimum snowflake size when defining the snowflake size. In the interval execution function setinterval specified by js, we use random numbers to make the snowflake randomly generate the size between the largest and the smallest:

Var sizeflak = minSize+Math.random () * (maxSize-minSize); / / produces snowflakes of different sizes

2. Define the interval at which the function is executed. This may not be defined, or it can be written directly.

3. Define the fixed attribute color of the snowflake and define the width of the view.

Third, introduce the variables into the interval loop function according to the previously defined variables:

It's much easier at this point, because the function is executed every few seconds, so we just need to take everything we defined between the maximum and the minimum. Then clone the previously defined snowflake. Here we will talk about the cloning of jq and js.

The cloning of jq is a node direct. Clone (), which is an encapsulated js cloning method. Js is the direct node. CloneNode (true), you just need to know so that you don't rely too much on the jq library.

The last step: put the cloned node into our parent node, that is, the view, our view here is body, so directly appendto (body), and then jq has an animated api, and we directly use this api to make the whole snowflake from cloning to movement, and then finish the movement.

Later, the cloned snowflake remove is dropped, thus realizing the effect of the whole snowflake falling.

After reading this, the article "how to use jQuery to achieve snowflake falling effect" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it yourself to understand it. If you want to know more about related articles, welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.