Realizing snowflake falling effect based on jQuery-JS Tutorial-php.cn

Realizing snowflake falling effect based on jQuery

coldplay.xixi

Release： 2020-08-05 16:46:41

forward

2434 people have browsed it

Realizing snowflake falling effect based on jQuery

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">
 感： 最近贡献一下我在教学中的小案例 
 希望能给你一些帮助 ,希望大家继续关注我的博客
  
                 --王

Copy after login

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!