π Author home page: Hai Yong
π About the author: π CSDN high-quality creators in the whole stack field π₯ HDZ core group members
π Fan benefits: π Fan group π Send 6-9 books a week and various small gifts from time to time( Previous award records)
Jump straight to the end Go to the review area to get the book
Many little friends in the South may not have seen or never seen snow. Today I bring you a small Demo to simulate the snow scene. First, let's see the operation effect
You can click to see online operation π http://haiyong.site/xiaxue
First, let's look at the project structure, a picture of snowflakes and a html file and jquery-1.4 2.js
I put the snowflake pictures I used here, or I can directly use the picture address I uploaded to my website: http://haiyong.site/wp-content/uploads/2021/12/snow.png Start with a picture, the content depends on JS.
HTML code
Here is the content in html, nothing
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hai Yongπ | The snow is falling</title>
<meta name="viewport" content="width=device-width,user-scalable=no">
<meta name="keywords" content="The snow is falling" />
<meta name="description" content="tool | Snow one by one; Determined to build a fishing website with 100 small games. Made By HaiyongοΌTechnical support - Haiyong" />
<meta name="author" content="Hai Yong(http://haiyong.site/moyu)" />
<meta name="copyright" content="Hai Yong(http://haiyong.site/moyu)" />
<link rel="icon" href="http://haiyong.site/wp-content/uploads/2021/07/cropped-59255587-1-192x192.jpg" sizes="192x192" />
<style type="text/css">
body{
background-color: #000000;
margin: 0;/* Remove the built-in outer margin */
}
img{
position: absolute;
}
</style>
</head>
<body>
<script src="js/jquery-1.4.2.js" type="text/javascript" charset="utf-8"></script>
</body>
</html>
JS code:
First, start the timer to add snowflake pictures. Here, < img SRC ='images / snow Png '> can be changed to < img SRC =' http://haiyong.site/wp-content/uploads/2021/12/snow.png '>
setInterval(function(){
var img = $("<img src='images/snow.png'>");
$("body").append(img);
Here, set the snowflake size to 10-20px, and the following formula represents (0-10 + 10)px
var size = parseInt(Math.random()*11)+10;
img.css("width",size+"px");
Get screen width
var w = $(window).width();
The value range should be 0 - screen width - snowflake width
var left =parseInt(Math.random()*(w-size));
Give the random 1eft to the picture
img.css("left",left+"px");
Add the animation of snowflake movement to get the snowflake movement distance = screen height - snowflake size
var top = $(window).height()-size;
The code in the following comments is used to clear the cache, which can be added or not.
img.animate({"top":top+"px"},size*100)
/* .fadeOut(1000,function(){
//When the animation is complete, execute this code to clear the cache
img.remove();
//console.log($("img").length);
}); */
},10)
If you cancel the annotation, you will see that the falling snow will disappear, as shown in the following figure
If you like to see the snow, you can comment it out. The preview effect is like this
Here, the effect we want to achieve is completed. If the running time is too long, it may lead to too much memory occupation and cause the Caton phenomenon. You can uncomment the content in the last comment in the html code, so that the snow below will fade out and be remove d. However, I think the snow is also very beautiful, so it doesn't melt, like the following π
If there are any questions you can send me, I will update them all the time
Source code acquisition method:
You can pay attention to the author's official account [Hai Yong] reply to the snowy effects.
Later, I will continue to update similar free and fun H5 games, Java games, fun and practical projects and software, etc
Finally, don't forget β€ or π Support
π₯ Fans in the review area are pumping books
π You are welcome to put forward your opinions and suggestions in the comment area! (select three lucky people to send books, and the physical picture is as follows) π
Code farming practice: 32 rules for writing elegant code
[content introduction]
For program developers who have mastered a certain programming language and have been engaged in programming for 1 ~ 3 years and are willing to develop for a long time on this road, this book puts forward some suggestions to improve programming methods, involving many aspects of specific programming work, focusing on practice. Most of the examples in the book are real cases encountered by the author in his actual programming work, which has high reference value. This book puts forward 32 rules for writing code from five aspects: readability, reliability, efficiency, maintainability and scalability. These rules have high reference and guiding significance for the actual programming work of program developers, and are very worthy of purchase by such readers.
32 rules for code farming practice to write elegant code the work of a former senior architect of Huawei teaches you how to create elegant code. It is suitable for readers who have a certain programming foundation and want to further improve their personal programming ability. It can also be used as a teaching reference book for computer teachers and students in colleges and technical secondary schools.
π£ be careful:
Three days later, that is, on December 18, two students were selected from the comment area to send books
π Interview question bank: Java, Python, front-end core knowledge points and interview real question materials
π Office supplies: thousands of high-quality PPT templates and more than 1000 resume templates
π Learning materials: 2300 sets of PHP website source code, wechat applet introduction materials
If you can't get in touch after winning the prize, it will be regarded as giving up. You can find the author's contact information from the card below. 6 ~ 9 books will be sent every week, and the efforts to send books later will be increased. It's not a problem to send hundreds or thousands of books a year. Note [enter the group] don't get lost when receiving books. Note [resources] can obtain the above information ππ»ππ»ππ»