飘落的雪......但只有在老鼠移动的时候？

时间：2014-03-07 22:48:57

标签： javascript jquery

我有一个客户（出于她自己的原因......！）迫切希望从她的网页顶部出现20世纪90年代风格的闪耀。似乎存在大量的降雪脚本来促进这一点，但问题是她只希望动画在鼠标移动时持续存在 - 当鼠标停止时，她希望闪光停止下降。

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>

2 个答案:

答案 0 :(得分：2)

这样的事情：听一个mousemove事件，并设置500ms的超时以阻止雪。当鼠标再次移动时，清除上次的超时，并设置一个新的超时。 JS代码：

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);
    }
}

答案 1 :(得分：2)

如果有效，请告诉我。请记住，薄片的数量是有限制的，因此除非已经有足够的薄片，否则它不会总是产生新的薄片。

<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>
相关问题
最新问题