Heim > Web-Frontend > js-Tutorial > Realisierung des Schneeflockeneffekts basierend auf jQuery

Realisierung des Schneeflockeneffekts basierend auf jQuery

coldplay.xixi
Freigeben: 2020-08-05 16:46:41
nach vorne
2317 Leute haben es durchsucht

Realisierung des Schneeflockeneffekts basierend auf jQuery

Das Beispiel in diesem Artikel teilt den spezifischen Code von jQuery, um den Schneeflocken-Falleffekt zu erzielen. Der spezifische Inhalt lautet wie folgt:

Quellcode-Anzeige:

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

Verwandt Lernempfehlungen:
Javascript-Video-Tutorial

Das obige ist der detaillierte Inhalt vonRealisierung des Schneeflockeneffekts basierend auf jQuery. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Verwandte Etiketten:
Quelle:jb51.net
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage