“Yuyuantan Park Cherry Blossom Festival” is held in Yuyuantan Park cherry blossom festival every year, visitors to Yuyuantan Park, can enjoy 20 varieties of 2,000 cherry blossoms. 2016 Yuyuantan Cherry Blossom Festival time: from mid-March to mid-April, the best viewing, March 23,2016 opening (specific opening time is unknown -) 6:00-20:30 (21:30 Jing Yuan). The flowering period of cherry trees is very short. It only takes seven days from flowering to fading, and the whole tree only takes about two weeks from flowering to fading.

I have not seen cherry blossoms in Beijing for several years, mainly because I am not interested in them. This time in friends repeatedly invited, finally came to yuyuantan Park to enjoy cherry blossoms, the story began…

Gorgeous dividing line

V1.0 Story development

W: Come and take my picture. Take my picture

M: I’ve taken a lot of them

W: Come on, show me how it looks

W: This is a good one, the feeling of the cherry blossoms falling is good, but the cherry blossoms are not moving in the picture, otherwise it would be more beautiful.

M: You can just use Meitu xiu xiu.

W: Meitu Xiu Xiu? Hey, by the way, you are not doing website development, you help me to make this picture with the website flower has been floating in that effect?

. The man fell silent, as if realizing that he had not made the suggestion

Gorgeous dividing line

Yes, the man in the story is me, I am I am a different color of fireworks. Ha ha ~ ~ ~

As a “senior” engineer (ps: actually a diaos), there is a lot of drama like this in life, it seems to outsiders that because you are a programmer, so you have to be all about the computer.

Because I am a programmer, I have a similar story.

  • Fix a computer or install a system (believe this should be every programmer experience, otherwise it means that you have a hardware expert in your circle, do not need you to do these things)
  • Buy train tickets/air tickets/hotels for me (please book my tickets online, you are familiar with this)
  • Lane QQ space (cousin, are you doing website development? Then you help me do QQ space.
  • .

If you have been shot in the above story, please feel free to raise your PAWS to like it, or share more dog blood story, please jump to the bottom of the comments!

V2.0 text starts

Okay, start the text quickly, otherwise the dividing line is not enough, and then cut cut.

This is the tech blog, and we only talk about technology. If you said yes, you should do it.

V3.0 technical analysis

 

To achieve the effect of cherry blossom movement, you need to use position, so many petals need to use JS clone(), petals are dynamic need to use the timer setInterval.

V4.0 code begins

Is that enough? Such an effect is actually not difficult. If we dissect it any more, someone might say “do”.

     HTML part

<! DOCTYPE HTML > < HTML XMLNS = "http://www.w3.org/1999/xhtml" > < head > < title > cherry blossom festival < / title > < style > HTML, body {the font-family: Helvetica, Arial, sans-serif; font-size: 12px; line-height: 16px; padding: 0; margin: 0; color: pink; } < / style > < script SRC = "http://toutouge.github.io/Demo/carousel/jquery-1.10.2.js" > < / script > < script src="jquery.nagareboshi.js"></script> <script> $(function () { $.fn.nagareboshi({ minSize: 5, maxSize: 50, newOn: FlakeChar: '#0099FF', '✿'}); }) </script> </head> <body style="background-color:black;" > </body> </html>Copy the code

The HTML section is fairly straightforward, with nothing special to say. If I have to say something, let’s… And line and cherish it ~

     JS part

/** * nagareboshi ** * @version 1 (3/31/2016) * @author * @requires jquery ** @params flakeChar - Floating icon style, Default is snowflake, other beautiful symbols for reference: Sunday ღ❣♔ ♖♚♛♜ ♖♚♛♜ ♖♚♛♜ ☂☃ % ☽☾♨❄❅❆★☆ Strategies for sheep sheep * @params minSize - Default size minimum is 10 * @params maxSize - default size maximum is 20 * @params newOn - Frequency of appearing new logo, Default is 500 * @params flakeColors - default icon color, default is #FFFFFF * @Params durationMillis - stop loading icon time, * @example $.fn. Nagareboshi ({maxSize: 200, newOn: 1000}); * /. (function ($, window, document, undefined) { $.fn.nagareboshi = function (options) { var $flake = $('<div class="flake" />').css({ 'position': 'absolute', 'top': '-50px' }), documentHeight = $(document).height(), documentWidth = $(document).width(), defaults = { flakeChar: "The & # 10052;" , minSize: 10, maxSize: 20, newOn: 500, flakeColor: ["#ffffff"], durationMillis: Null}, // When the extend method is passed more than one argument, it consolidates all argument objects into the first one. Also, if an object has a property of the same name, the last one overwrites the first one when merging. $.extend({}, defaults, options); $.extend({}, defaults, options); $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 = documentHeight - defaults.maxSize - 40, endPositionLeft = startPositionLeft - 100 + Math.random() * 200, durationFall = documentHeight * 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: Function () {$(this).remove()}); function () {$(this).remove(); }, options.newOn); console.log(options.durationMillis); if (options.durationMillis) { setTimeout(function () { clearInterval(interval); }, options.durationMillis); }}; })(jQuery, window, document);Copy the code

JS part explanation:

1. Why does the code start? (function ($, window, document, undefined) {start with a semicolon? In fact, the semicolon is used to act as the first pair of parentheses for a self-called anonymous function to be connected to functions defined by other code (many plug-ins can be introduced in a project), so as to avoid errors caused by someone else’s code not ending with a semicolon.

Such as:

The code above is a typical self – calling anonymous function and other plug-in code without semicolon separation, you can try this code will run error? Ps: This part of the content is also learned from Liu Wayong’s blog.

2. About $. The extend (); As detailed in the code comments section, extend() is still highly visible when writing your own extensions.

3. Use sizeFlake = options.minsize + math.random () * options.maxsize to randomly set the size of each cloned petal

4. There is not much to explain, and the comments in the code are quite clear about how parameters are used.

     Results demonstrate

In order to protect personal privacy, the background image in the demo has been changed to black background color, if you want to use the image, you can change it yourself here.

<body style="background-color:black;" >Copy the code

V Blog Summary

The origin of the story and the code part (some of the code implementation has seen an open source plugin on Github, which plugin also can not remember) are introduced almost, I hope to use this blog to let you have a new understanding of the jquery plug-in.

A special note needs to be made here. In fact, the real motivation for writing this blog is to tell everyone that the Yuyuantan Cherry Blossom Festival has already started. If you don’t go to see it, you will not see it.

Are you ready? Let’s go.

 

About the author: Focus on basic platform project development. If you have any questions or suggestions, please feel free to comment! Copyright notice: The copyright of this article belongs to the author and the blog garden, welcome to reprint, but without the consent of the author must retain this statement, and give the original text link in a prominent place on the page of the article. For the record: all comments and messages will be answered as soon as possible. You are welcome to correct your mistakes and make progress together. Or direct private message I support the blogger: if you think the article is helpful to you, you can click on the lower right corner of the article [recommendation]. Your encouragement is the author to adhere to the original and continuous writing of the biggest power! \