只在鼠标移动时下降snow...but？

Question

我有个客户(因为她自己的原因……)她不顾一切地希望从她的网页顶部冒出90年代风格的飘落火花。这里似乎有大量的降雪脚本来促进这一点，但问题是她只想让动画在鼠标移动时持续存在--当鼠标停止时，她希望火花停止下落。

彼得格里克的雪人给了我最接近的视觉效果，我正在寻找，但我只是不知道如何阻止它动画时，鼠标停止移动。我的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>

Answer 2

如下所示:侦听mousemove事件，并设置500 to的超时以阻止下雪。当鼠标再次移动时，清除上次的超时，并设置新的超时。“联合来文法典”：

var interval;
window.onmousemove=function(){
    clearInterval(interval);
    startSnow();
    interval=setTimeout(stopSnow,500);
}

其中startSnow()和stopSnow()是您提供的函数。

编辑:下面是 startSnow() 和 stopSnow() 函数的一些代码：

var snowGoing=true;
function startSnow(){
    if(snowGoing===false){
        snowGoing=true;
        movesnow();
    }
}
function stopSnow(){
    if(snowGoing===true){
        snowGoing=false;
        clearTimeout(timer);
    }
}