基于jQuery实现雪花飘落效果-js教程-PHP中文网

基于jQuery实现雪花飘落效果

coldplay.xixi

发布： 2020-08-05 16:46:41

转载

2318 人浏览过

基于jQuery实现雪花飘落效果

本文实例为大家分享了jQuery实现雪花飘落效果的具体代码，供大家参考，具体内容如下

效果展示：

源码展示：

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

登录后复制

相关学习推荐：javascript视频教程

以上是基于jQuery实现雪花飘落效果的详细内容。更多信息请关注PHP中文网其他相关文章！