Home > Article > Web Front-end > Realizing snowflake falling effect based on jQuery

Realizing snowflake falling effect based on jQuery

coldplay.xixiforward: 2020-08-05 16:46:412281browse

The example in this article shares the specific code for jQuery to achieve the snowflake falling effect for your reference. The specific content is as follows

Effect display:

Source code display:

<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>jquery实现雪花飘落</title>
  <script src="http://libs.baidu.com/jquery/1.11.3/jquery.min.js"></script>
  <style>
    * {
      margin:0px;
      padding:0px;
    }
    body {
      position:relative;
      height:1000px;
      width:100%;
      overflow:hidden;
      background-color: #666;
    }
    span {
      display:block;
      opacity:0.7;
    }
  </style>
</head>
<body>
 
 
<script>
  $(function() {
    setInterval(function() {
      var maxW = document.body.clientWidth,
        maxH = document.body.clientHeight,
        left = Math.random() * maxW,
        bottom = left - (Math.random() - 0.5) * 0.2 * maxW, //保证落下的位置水平有变化，但不大
        opacity = 0.7 + 0.3 * Math.random();
      speed = 30;
      size = 20 + 10 * Math.random(), //字体20-30
        color = &#39;#fff&#39;;
      // num = Math.floor(Math.random() * 10) //产生0-9随机数，当然你们可以自己设置
      num =&#39;*&#39;;
      var style = &#39;position:absolute;top:0px;font-size:&#39; + size + &#39;px;color:&#39; + color + &#39;;left:&#39; + left + &#39;px;opacity:&#39; + opacity;
      var p = &#39;<span class = "dd" style="&#39; + style + &#39;">&#39; + num + &#39;</span>&#39;
      $(&#39;body&#39;).append(p)
      $(&#39;span&#39;).animate({
        top: maxH,
        left: bottom
      }, 3000, function() {
        $(this).remove() //这一步很关键，要把落下的去掉，不然会越积越多
      });
    }, 20) //20ms产生一个
  })
</script>
<pre style="color:red">
 感： 最近贡献一下我在教学中的小案例 
 希望能给你一些帮助 ,希望大家继续关注我的博客
 
                 --王

Related learning recommendations: javascript video tutorial

The above is the detailed content of Realizing snowflake falling effect based on jQuery. For more information, please follow other related articles on the PHP Chinese website!

Statement：

This article is reproduced at:jb51.net. If there is any infringement, please contact admin@php.cn delete

Previous article：Implementing backgammon mini game based on js+canvasNext article：Implementing backgammon mini game based on js+canvas

See more

Realizing snowflake falling effect based on jQuery

Related articles