How to make snowflakes fall using jQuery-JS Tutorial-php.cn

Home

Web Front-end

JS Tutorial

How to make snowflakes fall using jQuery

php中世界最好的语言

Jun 02, 2018 pm 02:06 PM

jquery accomplish

This time I will show you how to use jQuery to realize snowflakes falling, and what are the precautions for using jQuery to realize snowflakes falling. The following is a practical case, let's take a look.

Preface

I have been free recently, so I planned to write an effect of falling snowflakes. I didn’t write too awesome special effects. It’s great. The amount of code is simplified, so it is easy to read the code and easy to use. It is a blessing for those newbies. It is easy to read and learn. Let’s start with the code directly, and then explain it one by one. You can just copy and paste it and use it. It is even easier to change.

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title>雪花飘落</title>
 </head>

 <style type="text/css">
  body{background: black;height: 100%;overflow: hidden;}
  .xh{cursor: pointer;}
 </style>
 <body>
  <p class="bk">

  </p>
 </body>
  <script src="jquery-1.8.3.min.js"></script>
 <script type="text/javascript">
  var minSize = 5; //最小字体
  var maxSize = 50;//最大字体
  var newOne = 200; //生成雪花间隔
  var flakColor = "#fff"; //雪花颜色
  var flak = $("<p class=&#39;xh&#39;></p>").css({position:"absolute","top":"0px"}).html("❉");//定义一个雪花
  var dhight = $(window).height(); //定义视图高度
  var dw =$(window).width(); //定义视图宽度
  setInterval(function(){
    var sizeflak = minSize+Math.random()*maxSize; //产生大小不等的雪花
    var startLeft = Math.random()*dw; //雪花生成是随机的left值
    var startopcity = 0.7+Math.random()*0.3; //随机透明度
    var endpositionTop= dhight-100; //雪花停止top的位置
    var endLeft= Math.random()*dw; //雪花停止的left位置
    var durationfull = 5000+Math.random()*3000; //雪花飘落速度不同
    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);
 </script>
</html>

Copy after login

The above is the code. Is it very simple? Can you tell me whether it can achieve the desired effect? Let you see the effect below

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

Of course we can also add other interactive effects, change the picture into a small airplane, and then make a web game about masturbating. It is actually very simple, just add interaction and some logic to it. . Now I will give you a step-by-step explanation of the entire programming idea.

Premise summary: I used jq for this. Of course, you can also use native writing, but jq is more trouble-free, so I used jq.

First introduce jq: This needs to be based on your own To write in a real directory, pay attention to two points when importing:

1. Remember that it is generally best to put it at the bottom of the entire page when importing, because when the page is loaded, it is loaded from top to bottom. If When jq is introduced, placing it above the style will make the page load slower and affect the user experience. Therefore, placing it below will make the style and pictures load first, which is beneficial to the user experience.

2. When introducing, do not put it below the jq-dependent code, because the page loads from top to bottom. If you put it below, the dependent code will not be able to find jq variables and methods. Report an error.

2. Before writing, think about the variables you need, and then define the variables:

What we are doing is snowflakes falling, so I use * To replace snowflakes, so we need to know how 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 the snowflake and know several properties of the snowflake.

1. We know that the sizes of snowflakes are different when it snows, so when we define the size of snowflakes, we need to use the size of the largest snowflake and the smallest snowflake. In js, we specify the interval execution function setinterval. Random numbers are used to randomly generate snowflakes with sizes between the largest and smallest:

var sizeflak = minSize Math.random()*(maxSize-minSize); // Generate snowflakes of different sizes

　2. Define the interval for executing the function. You don’t need to define this. You can just write it directly

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

3. Define variables

based on the previous and introduce them into the interval loop function:

This step is much simpler, because This function is executed every few seconds, so we only need to take the previously defined things between the maximum and minimum values. Then clone the previously defined snowflake. Here we will talk about the cloning of jq and the cloning of js

The cloning of jq is the direct node

.clone(), which is the encapsulated js cloning method. js is the direct node .cloneNode(true) , you only need to know it, so that you will not rely too much on the jq library.

The last step: Put the cloned node into our parent node, which is the view. Our view here is body, so directly appendto (body) , then jq has an animation API, we directly use this API to make the entire snowflake move from cloning to movement, and then remove the cloned snowflake after the movement

, thus realizing the entire snowflake Falling effect.

Summary: This page does not have much interaction, but it also contains some knowledge points and summarizes the key technologies used.

1. Snowflakes fall randomly and are of random size Math.random() generates random numbers from 0 to 1

2. Use of interval execution functions setInterval (function(){}, time interval)

3. jq’s animation function animate

4. Clone and delete nodes clone() remove()

I believe you have mastered the method after reading the case in this article, more Please pay attention to other related articles on the php Chinese website!

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

2 weeks ago By DDD

R.E.P.O. How to Fix Audio if You Can't Hear Anyone

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Chat Commands and How to Use Them

1 months ago By 尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Hot Topics

Where is the login entrance for gmail email?

7530

CakePHP Tutorial

1378

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers

Related knowledge

How to implement dual WeChat login on Huawei mobile phones? Mar 24, 2024 am 11:27 AM

How to implement dual WeChat login on Huawei mobile phones? With the rise of social media, WeChat has become one of the indispensable communication tools in people's daily lives. However, many people may encounter a problem: logging into multiple WeChat accounts at the same time on the same mobile phone. For Huawei mobile phone users, it is not difficult to achieve dual WeChat login. This article will introduce how to achieve dual WeChat login on Huawei mobile phones. First of all, the EMUI system that comes with Huawei mobile phones provides a very convenient function - dual application opening. Through the application dual opening function, users can simultaneously

PHP Programming Guide: Methods to Implement Fibonacci Sequence Mar 20, 2024 pm 04:54 PM

The programming language PHP is a powerful tool for web development, capable of supporting a variety of different programming logics and algorithms. Among them, implementing the Fibonacci sequence is a common and classic programming problem. In this article, we will introduce how to use the PHP programming language to implement the Fibonacci sequence, and attach specific code examples. The Fibonacci sequence is a mathematical sequence defined as follows: the first and second elements of the sequence are 1, and starting from the third element, the value of each element is equal to the sum of the previous two elements. The first few elements of the sequence

How to implement the WeChat clone function on Huawei mobile phones Mar 24, 2024 pm 06:03 PM

How to implement the WeChat clone function on Huawei mobile phones With the popularity of social software and people's increasing emphasis on privacy and security, the WeChat clone function has gradually become the focus of people's attention. The WeChat clone function can help users log in to multiple WeChat accounts on the same mobile phone at the same time, making it easier to manage and use. It is not difficult to implement the WeChat clone function on Huawei mobile phones. You only need to follow the following steps. Step 1: Make sure that the mobile phone system version and WeChat version meet the requirements. First, make sure that your Huawei mobile phone system version has been updated to the latest version, as well as the WeChat App.

Master how Golang enables game development possibilities Mar 16, 2024 pm 12:57 PM

In today's software development field, Golang (Go language), as an efficient, concise and highly concurrency programming language, is increasingly favored by developers. Its rich standard library and efficient concurrency features make it a high-profile choice in the field of game development. This article will explore how to use Golang for game development and demonstrate its powerful possibilities through specific code examples. 1. Golang’s advantages in game development. As a statically typed language, Golang is used in building large-scale game systems.

PHP Game Requirements Implementation Guide Mar 11, 2024 am 08:45 AM

PHP Game Requirements Implementation Guide With the popularity and development of the Internet, the web game market is becoming more and more popular. Many developers hope to use the PHP language to develop their own web games, and implementing game requirements is a key step. This article will introduce how to use PHP language to implement common game requirements and provide specific code examples. 1. Create game characters In web games, game characters are a very important element. We need to define the attributes of the game character, such as name, level, experience value, etc., and provide methods to operate these

jQuery Tips: Quickly modify the text of all a tags on the page Feb 28, 2024 pm 09:06 PM

Title: jQuery Tips: Quickly modify the text of all a tags on the page In web development, we often need to modify and operate elements on the page. When using jQuery, sometimes you need to modify the text content of all a tags in the page at once, which can save time and energy. The following will introduce how to use jQuery to quickly modify the text of all a tags on the page, and give specific code examples. First, we need to introduce the jQuery library file and ensure that the following code is introduced into the page: &lt

Use jQuery to modify the text content of all a tags Feb 28, 2024 pm 05:42 PM

Title: Use jQuery to modify the text content of all a tags. jQuery is a popular JavaScript library that is widely used to handle DOM operations. In web development, we often encounter the need to modify the text content of the link tag (a tag) on the page. This article will explain how to use jQuery to achieve this goal, and provide specific code examples. First, we need to introduce the jQuery library into the page. Add the following code in the HTML file:

Using PHP to implement SaaS: a comprehensive analysis Mar 07, 2024 pm 10:18 PM

I'm really sorry that I can't provide real-time programming guidance, but I can provide you with a code example to give you a better understanding of how to use PHP to implement SaaS. The following is an article within 1,500 words, titled "Using PHP to implement SaaS: A comprehensive analysis." In today's information age, SaaS (Software as a Service) has become the mainstream way for enterprises and individuals to use software. It provides a more flexible and convenient way to access software. With SaaS, users don’t need to be on-premises

See all articles