Yuantan cherry blossom appreciation: From nothing to writing a jQuery open-source plug-in, yuantan jquery

Yuantan cherry blossom appreciation: From nothing to writing a jQuery open-source plug-in, yuantan jquery

The "Sakura Festival" in yuyuantan Park is a cherry blossom festival held in yuyuantan Park every year. Visitors can go to yuyuantan Park to enjoy 2000 cherry blossoms of 20 varieties. 2016 yuyuantan Sakura festival time: the best viewing experience from January 1, to October 1, (the opening time is unknown--)-(Jingyuan ). The flowering period of cherry blossoms is very short. The period from blossom to withered is only seven days, and the whole cherry blossom is only about two weeks from blossom to full thanks.
I have been in Beijing for several years and have never seen cherry blossoms, but I don't catch a cold. At the invitation of friends, I finally came to yuyuantan Park to enjoy cherry blossoms. The story started like this...

Gorgeous split line V1.0 story development

Female: Come and take a photo of me.

Male: I have already shot a lot.

Female: Come, show me how it is.

Female: This is good. It's a good feeling for falling cherry blossoms. Unfortunately, the cherry blossoms do not move on the photos, or they will be more beautiful.

Male: You just need to use meitu.

Female: meitu xiuxiu? Hey, by the way, aren't you doing website development? Can you help me make this image with the effect that the website has always been floating there?

... Male fell into silence and seemed to understand that he shouldn't give that suggestion just now.

Gorgeous split line

Yes, I am the man in the story, and I am the fireworks of different colors. Haha ~~~

As a "senior" Engineer (ps: Actually, it's just a piece of cake), there are still many stories like this in life, as if to outsiders, because you are a programmer, so, for computer-related purposes, you have to attend plenary sessions.

Because it is a programmer, similar dog blood plots (all for personal experience)

• Computer repair or system installation (I believe this should have been done by every programmer, otherwise it will only show that you have a hardware expert in your circle and you don't need to do this)
• Buy a train ticket/Plane Ticket/book a hotel (you can help me book a ticket online. You are familiar with this)
• Get QQ space (cousin, do you develop a website? Then you can help me get the QQ space .)
• ...

If you have been shot in the above plot, please raise your claw in the lower-right corner or share more stories. Please jump to the bottom to comment!

Start of v2.0 text

Now, let's get started with the text. Otherwise, the split line is not enough, and the cut will be gone.

Here is the technology blog. We only talk about technology. Now that you have promised others, you have to do it.

V3.0 Technical Analysis

 

If you need the effect of cherry blossom, you need to use the position, so many petals need to use the js clone (). If the petals are dynamic, you need to use the timer setInterval. The v4.0 code is almost the same at the beginning, right? Such an effect is actually not difficult. If we continue to analyze it, someone may say "do. Html section

<! DOCTYPE html> 
The html part is relatively simple and there is nothing special to note. If you have to say a few words, you can... and cherish it ~
JS Section
/*** Jquery. nagareboshi *** @ version 1 (3/31/2016) * @ author Head Brother * @ requires jQuery ** @ params flakeChar-float icon style. The default value is Snowflake. For other beautiful symbols, see:❥Bytes♔♕♖♚♛♜☼☽☾Zookeeper★☆Adjust bandwidth quota limit * @ params minSize-default size: 10 * @ params maxSize-default size: 20 * @ params newOn, the default value is 500 * @ params flakeColors-default icon color. The default value is # FFFFFF * @ params durationMillis-the time when the icon is stopped. The default value is always loading * @ example $. fn. nagareboshi ({maxSize: 200, newOn: 1000}); */; (function ($, window, document, undefined) {$. fn. nagareboshi = function (options) {var $ flake = $ ('<div class = "flake"/> 'hangzhou.css ({'position ': 'Absolte', 'top': '-50px'}), encryption entheight = $ (document ). height (), documentWidth = $ (document ). width (), defaults = {flakeChar: "& #10052;", minSize: 10, maxSize: 20, newOn: 500, flakeColor: ["# ffffff"], durationMillis: null}, // when more than one parameter is passed to the extend method, it merges all parameter objects into the first one. At the same time, if an object has an attribute with the same name, the preceding attributes will be overwritten when merged. // If the value of the passed options parameter exists, the corresponding value options = $ in the defaults object will be overwritten. extend ({}, defaults, options); parameter flake.html (options. flakeChar); var interval = setInterval (function () {var startPositionLeft = Math. random () * documentWidth-100, startOpacity = 0.5 + Math. random (), sizeFlake = options. minSize + Math. random () * options. maxSize, endPositionTop = incluentheight-defaults. maxSize-40, endPositionLeft = startPositionLeft-100 + Math. random () * 200, durationFall = random entheight * 10 + Math. random () * 5000; $ flake. clone (). appendTo ('body '). css ({left: startPositionLeft, opacity: startOpacity, 'font-size': sizeFlake, color: options. flakeColor [Math. floor (Math. random () * options. flakeColor. length)]}). animate ({top: endPositionTop, left: endPositionLeft, opacity: 0.2}, durationFall, 'linear ', function () {$ (this ). remove ()}) ;}, options. newOn); console. log (options. durationMillis); if (options. durationMillis) {setTimeout (function () {clearInterval (interval) ;}, options. durationMillis) ;};}( jQuery, window, document );
JS section:
1. Why does the Code start? (function ($, window, document, undefined) {starts with a semicolon? In fact, this Semicolon is used to act as the first pair of brackets for self-calling anonymous functions to be connected to other code-defined functions (many plug-ins may be introduced in a project, avoid errors caused by the absence of semicolons in other people's code.
For example:

The code above is a typical self-called anonymous function and other plug-in code that are not separated by semicolons. If you are interested, may you try this code and report an error?
Ps: This part is also learned in Liu wayong's blog.
2. For details about $. extend (); In the code comments section, the extend () field rate is still very high when writing the extension plug-in by yourself.
3. Use sizeFlake = options. minSize + Math. random () * options. maxSize to randomly set the size of each cloned petal.
4. There is nothing to explain too much. The comments section about how to use parameters in the Code is also very clear.
Effect demonstration

In order to protect personal privacy, the demonstration has replaced the background image with a black background color. If you want to use the image, you can change it here.
<body style="background-color:black;">
V blog Summary
The Origin and code of the story (some of the Code implementations have been learned on an open-source plug-in on github, but the specific plug-in cannot be remembered) are similar, we hope to use this blog to give you a new understanding of the jquery plug-in.
Special instructions are required here. In fact, the real motive for writing this blog is to tell everyone that the cherry blossom festival in yuyuantan has started and you will not be able to read it again.
Are you ready? Let's go.
 
 
Author:Please call my first brother 
Exit: http://www.cnblogs.com/toutou/
About the author: focused on Microsoft platform project development. If you have any questions or suggestions, please kindly advise me!
Copyright Disclaimer: The copyright of this article is shared by the author and the blog site. You are welcome to reprint this article. However, you must keep this statement without the author's consent and provide the original article link clearly on the article page.
We hereby declare that all comments and private messages will be replied immediately. You are also welcome to correct the mistakes and make progress together. Or directly send a private message to me.
Support blogger: If you think the article is helpful to you, click the bottom right corner of the article[Recommended]. Your encouragement is the greatest motivation for the author to stick to originality and continuous writing!