小贝子编程

如何限制粒子仅从一个对象/位置/文件释放，而不是在屏幕上单击任何地方



如何限制粒子仅从一个对象/位置/文件释放而不是单击屏幕上的任何地方？当我们单击屏幕上的任何地方，喷泉都可以使用，但是我的目标是通过单击屏幕上的特定位置/对象来限制喷泉的工作。例如，让我们在屏幕中央假设一个地方或150x150px图像，并且喷泉只有在我单击图像而无处可使用时才能起作用。我会感谢帮助。

//-------------------------------- For Squares-------------
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    maxTime = 10,
    sizes = [
        75
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};
$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});
$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
 var counter = 0;
   var timer = setInterval(function () {
    if (counter < maxTime) {
      createParticle( event );
    } else {
      clearInterval( timer );
      counter = 0;
    }
    counter++;
    
  }, 1000 / 20);
  
  $d.
  on('mouseup mouseleave touchend touchcancel touchleave', function () {
    clearInterval( timer );
  });
});
function createParticle ( event ) {
  var particle = $('<div class="particle">' + getSymbol() + '</div>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles );
  particleCount++;
  updateParticleCount();
  
  var particleTimer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
  
    
    particle
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + 1.0,
      transform: 'rotate(' + spinVal + 'deg)',
      webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle.remove();
      particleCount--;
      updateParticleCount();
      clearInterval(particleTimer);
    }
  }, 1000 / 50);  
}

//-------------------------------- For Circles-------------
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles2 = $('.particles2'),
    particle2Count = 0,
    maxTime = 10,
    sizes = [
        75
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticle2Count () {
  $('.particle2-count > .number').text(particle2Count);
};
$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});
$d
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var counter = 0;
   var timer = setInterval(function () {
    if (counter < maxTime) {
      createParticle2( event );
    } else {
      clearInterval( timer );
      counter = 0;
    }
    counter++;
    
  }, 1000 / 20);
  
  $d.
  on('mouseup mouseleave touchend touchcancel touchleave', function () {
    clearInterval( timer );
  });
});
function createParticle2 ( event ) {
  var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle2
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles2 );
  particle2Count++;
  updateParticle2Count();
  
  var particle2Timer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
    
    
    particle2
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + 1.0,
      transform: 'rotate(' + spinVal + 'deg)',
      webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle2.remove();
      particle2Count--;
      updateParticle2Count();
      clearInterval(particle2Timer);
    }
  }, 1000 / 50);  
}
function getSymbol() {
  var symbols = "12X34Y5Z+x=-%";
  return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');
.particle-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}
.particles > .particle {
  background: #000;
  border-radius: 20%;
  position: absolute;
  background-repeat: no-repeat;
  color: white;
}
.particles > .particle.small {
  width: 10px;
  height: 10px;
}
.particles > .particle.normal {
  width: 15px;
  height: 15px;
}
.particles > .particle.big {
  width: 20px;
  height: 20px;
}
.particles > .particle.bigger {
  width: 25px;
  height: 25px;
}
.particles {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  font-family: 'Roboto Slab', serif;
  font-size: 48px;
  text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}
.particles2 > .particle2 {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  color: white;
}
.particles2 > .particle2.small {
  width: 10px;
  height: 10px;
}
.particles2 > .particle2.normal {
  width: 15px;
  height: 15px;
}
.particles2 > .particle2.big {
  width: 20px;
  height: 20px;
}
.particles2 > .particle2.bigger {
  width: 25px;
  height: 25px;
}
.particles2 {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  font-family: 'Roboto Slab', serif;
  font-size: 48px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  Click for particles
  <div class="particles">
  </div>
  <div class="particles2">
  </div>
</body>
</html>

您在整个文档上调用" ON(("函数。为了将其限制到特定对象，请使用$(" tag"(作为元素而不是$文档。

//-------------------------------- For Squares-------------
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles = $('.particles'),
    particleCount = 0,
    maxTime = 10,
    sizes = [
        75
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticleCount () {
  $('.particle-count > .number').text(particleCount);
};
$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});
$("p")
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
 var counter = 0;
   var timer = setInterval(function () {
    if (counter < maxTime) {
      createParticle( event );
    } else {
      clearInterval( timer );
      counter = 0;
    }
    counter++;
    
  }, 1000 / 20);
  
  $("p").
  on('mouseup mouseleave touchend touchcancel touchleave', function () {
    clearInterval( timer );
  });
});
function createParticle ( event ) {
  var particle = $('<div class="particle">' + getSymbol() + '</div>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles );
  particleCount++;
  updateParticleCount();
  
  var particleTimer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
  
    
    particle
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + 1.0,
      transform: 'rotate(' + spinVal + 'deg)',
      webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle.remove();
      particleCount--;
      updateParticleCount();
      clearInterval(particleTimer);
    }
  }, 1000 / 50);  
}

//-------------------------------- For Circles-------------
var d = document, $d = $(d),
    w = window, $w = $(w),
    wWidth = $w.width(), wHeight = $w.height(),
    credit = $('.credit > a'),
    particles2 = $('.particles2'),
    particle2Count = 0,
    maxTime = 10,
    sizes = [
        75
    ],
    colors = [
      '#f44336', '#e91e63', '#9c27b0', '#673ab7', '#3f51b5',
      '#2196f3', '#03a9f4', '#00bcd4', '#009688', '#4CAF50',
      '#8BC34A', '#CDDC39', '#FFEB3B', '#FFC107', '#FF9800',
      '#FF5722', '#795548', '#9E9E9E', '#607D8B', '#777777'
    ],
    
    mouseX = $w.width() / 2, mouseY = $w.height() / 2;
function updateParticle2Count () {
  $('.particle2-count > .number').text(particle2Count);
};
$w
.on( 'resize' , function () {
  wWidth = $w.width();
  wHeight = $w.height();
});
$("p")
.on( 'mousemove touchmove' , function ( event ) {
  event.preventDefault();
  event.stopPropagation();
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
})
.on( 'mousedown touchstart' , function( event ) {
  if( event.target === credit.get(0) ){
    return;
  }
  mouseX = event.clientX;
  mouseY = event.clientY;
  if( !!event.originalEvent.touches ) {
    mouseX = event.originalEvent.touches[0].clientX;
    mouseY = event.originalEvent.touches[0].clientY;
  }
  var counter = 0;
   var timer = setInterval(function () {
    if (counter < maxTime) {
      createParticle2( event );
    } else {
      clearInterval( timer );
      counter = 0;
    }
    counter++;
    
  }, 1000 / 20);
  
  $("p").
  on('mouseup mouseleave touchend touchcancel touchleave', function () {
    clearInterval( timer );
  });
});
function createParticle2 ( event ) {
  var particle2 = $('<div class="particle2">' + getSymbol() + '</div>'),
      size = sizes[Math.floor(Math.random() * sizes.length)],
      color = colors[Math.floor(Math.random() * colors.length)],
      negative = size/2,
      speedHorz = Math.random() * 10,
      speedUp = Math.random() * 25,
      spinVal = 360 * Math.random(),
      spinSpeed = ((12 * Math.random())) * (Math.random() <=.5 ? -1 : 1),
      otime,
      time = otime = (1 + (.5 * Math.random())) * 1000,
      top = (mouseY - negative),
      left = (mouseX - negative),
      direction = Math.random() <=.5 ? -1 : 1 ,
      life = 10;
  
  particle2
  .css({
    height: size + 'px',
    width: size + 'px',
    top: top + 'px',
    left: left + 'px',
    background: color,
    transform: 'rotate(' + spinVal + 'deg)',
    webkitTransform: 'rotate(' + spinVal + 'deg)'
  })
  .appendTo( particles2 );
  particle2Count++;
  updateParticle2Count();
  
  var particle2Timer = setInterval(function () {
    time = time - life;
    left = left - (speedHorz * direction);
    top = top - speedUp;
    speedUp = Math.min(size, speedUp - 1);
    spinVal = spinVal + spinSpeed;
    
    
    particle2
    .css({
      height: size + 'px',
      width: size + 'px',
      top: top + 'px',
      left: left + 'px',
      opacity: ((time / otime)/2) + 1.0,
      transform: 'rotate(' + spinVal + 'deg)',
      webkitTransform: 'rotate(' + spinVal + 'deg)'
    });
    
    if( time <= 0 || left <= -size || left >= wWidth + size || top >= wHeight + size ) {
      particle2.remove();
      particle2Count--;
      updateParticle2Count();
      clearInterval(particle2Timer);
    }
  }, 1000 / 50);  
}
function getSymbol() {
  var symbols = "12X34Y5Z+x=-%";
  return symbols.charAt(Math.floor(Math.random() * symbols.length));
}
@import url('https://fonts.googleapis.com/css?family=Roboto+Slab:300');
.particle-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}
.particles > .particle {
  background: #000;
  border-radius: 20%;
  position: absolute;
  background-repeat: no-repeat;
  color: white;
}
.particles > .particle.small {
  width: 10px;
  height: 10px;
}
.particles > .particle.normal {
  width: 15px;
  height: 15px;
}
.particles > .particle.big {
  width: 20px;
  height: 20px;
}
.particles > .particle.bigger {
  width: 25px;
  height: 25px;
}
.particles {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  font-family: 'Roboto Slab', serif;
  font-size: 48px;
  text-align: center;
}
/**-----------------------------------------------------------------**/
.particle2-count {
  display: block;
  text-align: center;
  margin: 25px 0;
}
.particles2 > .particle2 {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  color: white;
}
.particles2 > .particle2.small {
  width: 10px;
  height: 10px;
}
.particles2 > .particle2.normal {
  width: 15px;
  height: 15px;
}
.particles2 > .particle2.big {
  width: 20px;
  height: 20px;
}
.particles2 > .particle2.bigger {
  width: 25px;
  height: 25px;
}
.particles2 {
  background: #000;
  border-radius: 100%;
  position: absolute;
  background-repeat: no-repeat;
  font-family: 'Roboto Slab', serif;
  font-size: 48px;
  text-align: center;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>
<body>
  <p>Click for particles</p>
  <div class="particles">
  </div>
  <div class="particles2">
  </div>
</body>
</html>

相关内容

最新更新


热门标签：

javascript python java c# php android html jquery c++ css ios sql mysql arrays asp.net json python-3.x ruby-on-rails .net sql-server django objective-c excel regex ruby linux ajax iphone xml vba spring asp.net-mvc database wordpress string postgresql wpf windows xcode bash git oracle list vb.net multithreading eclipse algorithm macos powershell visual-studio image forms numpy scala function api selenium