javascript - 下雪......但只有在鼠标移动时？

Question

我有一个客户(出于她自己的原因......!)迫切希望从她的网页顶部出现 1990 年代风格的坠落 Spark 。似乎存在大量的降雪脚本来促进这一点，但问题是她只希望动画在鼠标移动时持续存在——当鼠标停止时，她希望 Spark 停止下落。

Peter Gehrig 的 Snowmaker 提供了最接近我正在寻找的视觉效果，但我只是想不出如何在鼠标停止移动时停止动画。我的 Javascript 真的很糟糕(我正在 Codecademy 的帮助下研究它，但这需要时间)而且我通常通过将现有代码的零碎部分拼凑在一起来度过难关，但我无法弄清楚这一点。

Gehrig的代码如下，我不确定是否可以让它只在鼠标移动时触发......

    <script>
    // Set the number of snowflakes (more than 30 - 40 not recommended)
    var snowmax=35

    // Set the colors for the snow. Add as many colors as you like
    var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")

    // Set the fonts, that create the snowflakes. Add as many fonts as you like
    var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

    // Set the letter that creates your snowflake 
    var snowletter="+"

    // Set the speed of sinking (recommended values range from 0.3 to 2)
    var sinkspeed=0.6

    // Set the maximal-size of your snowflaxes
   var snowmaxsize=22

   // Set the minimal-size of your snowflaxes
   var snowminsize=8

   // Set the snowing-zone
   // Set 1 for all-over-snowing, set 2 for left-side-snowing 
   // Set 3 for center-snowing, set 4 for right-side-snowing
   var snowingzone=1


   var snow=new Array()
   var marginbottom
   var marginright
   var timer
   var i_snow=0
   var x_mv=new Array();
   var crds=new Array();
   var lftrght=new Array();
   var browserinfos=navigator.userAgent 
   var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
   var ns6=document.getElementById&&!document.all
   var opera=browserinfos.match(/Opera/)  
   var browserok=ie5||ns6||opera

   function randommaker(range) {        
        rand=Math.floor(range*Math.random())
   return rand
   }

   function initsnow() {
if (ie5 || opera) {
    marginbottom = document.body.clientHeight
    marginright = document.body.clientWidth
}
else if (ns6) {
    marginbottom = window.innerHeight
    marginright = window.innerWidth
}
var snowsizerange=snowmaxsize-snowminsize
for (i=0;i<=snowmax;i++) {
    crds[i] = 0;                      
    lftrght[i] = Math.random()*15;         
    x_mv[i] = 0.03 + Math.random()/10;
    snow[i]=document.getElementById("s"+i)
    snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    snow[i].size=randommaker(snowsizerange)+snowminsize
    snow[i].style.fontSize=snow[i].size
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    snow[i].sink=sinkspeed*snow[i].size/5
    if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-

snow[i].size)+marginright/4}
        if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
        snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
        snow[i].style.left=snow[i].posx
        snow[i].style.top=snow[i].posy
    }
    movesnow()
}

function movesnow() {
    for (i=0;i<=snowmax;i++) {
        crds[i] += x_mv[i];
        snow[i].posy+=snow[i].sink
        snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
        snow[i].style.top=snow[i].posy

        if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
            if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
            if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
            if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
            if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
            snow[i].posy=0
        }
    }
    var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
    document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
    }
    if (browserok) {
 window.onload=initsnow
    }
    </script>  

Answer 1

让我知道这是否有效。请记住，薄片的数量是有限制的，因此它不会总是生成新的薄片，除非已经有足够的薄片降落。

<script>
  var snowmax=35             // Set the number of snowflakes (more than 30 - 40 not recommended)
  var snowcolor=new Array("#aaaacc","#ddddFF","#ccccDD")      // Set the colors for the snow. Add as many colors as you like

  // Set the fonts, that create the snowflakes. Add as many fonts as you like
  var snowtype=new Array("Arial Black","Arial Narrow","Times","Comic Sans MS")

  var snowletter="+"      // Set the letter that creates your snowflake 
  var sinkspeed=0.6       // Set the speed of sinking (recommended values range from 0.3 to 2)
  var snowmaxsize=22      // Set the maximal-size of your snowflaxes
  var snowminsize=8       // Set the minimal-size of your snowflaxes

  // Set the snowing-zone
  // Set 1 for all-over-snowing, set 2 for left-side-snowing 
  // Set 3 for center-snowing, set 4 for right-side-snowing
  var snowingzone=1

  var snow=new Array()
  var marginbottom
  var marginright
  var timer
  var i_snow=0
  var x_mv=new Array();
  var crds=new Array();
  var lftrght=new Array();
  var browserinfos=navigator.userAgent 
  var ie5=document.all&&document.getElementById&&!browserinfos.match(/Opera/)
  var ns6=document.getElementById&&!document.all
  var opera=browserinfos.match(/Opera/)  
  var browserok=ie5||ns6||opera
  var mousemoving = false;

  function randommaker(range) {
    rand=Math.floor(range*Math.random())
    return rand
  }

  function initsnow() {
    if (ie5 || opera) {
      marginbottom = document.body.clientHeight
      marginright = document.body.clientWidth
    } else if (ns6) {
      marginbottom = window.innerHeight
      marginright = window.innerWidth
    }

    makeSnow();
    movesnow();
  }

function makeSnow() {
  var snowsizerange=snowmaxsize-snowminsize
  for (i=0;i<=snowmax;i++) {
    crds[i] = 0;
    lftrght[i] = Math.random()*15;
    x_mv[i] = 0.03 + Math.random()/10;
    snow[i] = document.getElementById("s"+i)
    snow[i].style.fontFamily=snowtype[randommaker(snowtype.length)]
    snow[i].size=randommaker(snowsizerange)+snowminsize
    snow[i].style.fontSize=snow[i].size
    snow[i].style.color=snowcolor[randommaker(snowcolor.length)]
    snow[i].sink=sinkspeed*snow[i].size/5
    if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
    if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
    if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
    if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
    snow[i].posy=randommaker(6*marginbottom-marginbottom-6*snow[i].size)
    snow[i].style.left=snow[i].posx
    snow[i].style.top=snow[i].posy
  }
}

function movesnow() {
  for (i=0;i<=snowmax;i++) {
    if (snow[i].posy<marginbottom-6*snow[i].size || parseInt(snow[i].style.left)<(marginright-3*lftrght[i])){
      crds[i] += x_mv[i];
      snow[i].posy+=snow[i].sink
      snow[i].style.left=snow[i].posx+lftrght[i]*Math.sin(crds[i]);
      snow[i].style.top=snow[i].posy
    }

    if (mousemoving) {
      if (snow[i].posy>=marginbottom-6*snow[i].size || parseInt(snow[i].style.left)>(marginright-3*lftrght[i])){
      if (snowingzone==1) {snow[i].posx=randommaker(marginright-snow[i].size)}
      if (snowingzone==2) {snow[i].posx=randommaker(marginright/2-snow[i].size)}
      if (snowingzone==3) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/4}
      if (snowingzone==4) {snow[i].posx=randommaker(marginright/2-snow[i].size)+marginright/2}
      snow[i].posy=0
      }
    }
  }
  var timer=setTimeout("movesnow()",50)
}

for (i=0;i<=snowmax;i++) {
  document.write("<span id='s"+i+"' style='position:absolute;top:-"+snowmaxsize+"'>"+snowletter+"</span>")
}

if (browserok) {
  window.onload=initsnow

  window.onmousemove = function() {
    mousemoving = true;
    setTimeout(function() {
      mousemoving = false;
    }, 500);
  }
}
</script>