如何限制粒子从只有一个对象/位置/文件释放，而不是点击屏幕上的任何位置？ [英] How to limit particle to release from only one object/position/file instead of clicking anywhere on screen?
本文介绍了如何限制粒子从只有一个对象/位置/文件释放，而不是点击屏幕上的任何位置？的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
如何限制粒子从只有一个对象/位置/文件释放，而不是点击屏幕上的任何位置？当我们点击屏幕上的任何地方并且喷泉工作时，但我的目标是通过点击屏幕上的特定位置/对象来限制喷泉工作。例如，让我们假设一个位置或一个150X150像素的图像在屏幕的中心，喷泉应该只有当我点击图像和其他地方时才有效。我会很感激这个帮助。
// ------- -------------------------正方形------------- 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'，' （）/ 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 （'mouseup mouseleave touchend touchcancel touchleave'，function（））; $ d。on（'mouseup mouseleave touchend touchcancel touchleave'，function（） {clearInterval（timer）;}）;}）; function createParticle（event）{var particle = $（'< div class =particle>'+ getSymbol（）+'< / div>'），size = size [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，人生= 10;粒子.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;粒子.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， FFC107'，'＃FF9800'，'＃FF5722'，'＃795548'，'＃9E9E9E'，'＃607D8B'，'＃777777']，mouseX = $ w.width（）/ 2，mouseY = $ w。 （）函数updateParticle2Count（）{$（'。particle2-count> .number'）。text（particle2Count）;}; $ w.on（'resize'，function（）{wWidth = $ w。 （）; mouseHove（）; 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 （'mouseup mouseleave touchend touchcancel touchleave'，function（））; $ d。on（'mouseup mouseleave touchend touchcancel touchleave'，function（） {clearInterval（timer）;}）;}）; function createParticle2（event）{var particle2 = $（'< div class =particle2>'+ getSymbol（）+'< / div>'），size = size [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，旋转Val = 360 * Math.random（），spinSpeed =（（12 * Math.random（）））*（Math.random（）<= -1：1），otime，time = otime =（1 +（.5 * Math.random（）））* 1000，top =（mouseY - negative），left =（mouseX - negative），direction = Math.random （）<= 5？ -1：1，人生= 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）; }函数getSymbol（）{var symbols =12X34Y5Z + x = - ％;返回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;边界半径：20％;位置：绝对;背景重复：不重复;颜色：白色;}。粒子> .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;边界半径：100％;位置：绝对;背景重复：不重复; font-family：'Roboto Slab'，衬线; font-size：48px; text-align：center;} / ** ---------------------------------------- ------------------------- ** /。particle2-count {display：block; text-align：center; margin：25px 0;}。particles2> .particle2 {background：＃000;边界半径：100％;位置：绝对;背景重复：不重复; 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;边界半径：100％;位置：绝对;背景重复：不重复; font-family：'Roboto Slab'，衬线; font-size：48px; text-align：center;}< script src = https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"></script><html><body>点击查看粒子< div class =particles> < / DIV> < div class =particles2> < / div>< / body>< / html>
h2_lin>解决方案
您在整个文档上调用on（）函数。为了限制它到一个特定的对象，使用$（tag）作为一个元素而不是$ document。
// -------------------------------- 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 ）/ 2，mouseY = $ w.height（）/ 2;函数updateParticleCount（）{$（'。particle-count> .number'）。text（particleCount）;}; $ w.on（'resize'，function（）{wWidth = $ w.width（）; （'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）。 ）;}）;}）; function createParticle（e （Math.floor（Math.random（）* sizes。））），size = size [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（）<= -1：1），otime，time = otime =（1 +（.5 * Math.random（）））* 1000，top =（mouseY - negative），left =（mouseX - negative），direction = Math.random （）<= 5？ -1：1，人生= 10;粒子.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;粒子.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， FFC107'，'＃FF9800'，'＃FF5722'，'＃795548'，'＃9E9E9E'，'＃607D8B'，'＃777777']，mouseX = $ w.width（）/ 2，mouseY = $ w。 （）函数updateParticle2Count（）{$（'。particle2-count> .number'）。text（particle2Count）;}; $ w.on（'resize'，function（）{wWidth = $ w。 （）;函数（event）{event.preventDefault（）; event.stopPropagation（）; mous（）; wHeight = $ w.height（）;}）; $（p）。 eX = 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 （'mouseup mouseleave touchend touchcancel touchleave'）（计数器
@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;边界半径：20％;位置：绝对;背景重复：不重复;颜色：白色;}。粒子> .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;边界半径：100％;位置：绝对;背景重复：不重复; font-family：'Roboto Slab'，衬线; font-size：48px; text-align：center;} / ** ---------------------------------------- ------------------------- ** /。particle2-count {display：block; text-align：center; margin：25px 0;}。particles2> .particle2 {background：＃000;边界半径：100％;位置：绝对;背景重复：不重复; 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;边界半径：100％;位置：绝对;背景重复：不重复; font-family：'Roboto Slab'，衬线; 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>点击查看粒子< / p> < div class =particles> < / DIV> < div class =particles2> < / div>< / body>< / html>
How to limit particle to release from only one object/position/file instead of clicking anywhere on the screen? As we click anywhere on the screen and the fountain works but my goal is to restrict fountain work by clicking on a particular position/object on the screen. For example, let's assume a place or a 150X150px image on the center of the screen and the fountain should work only when I click on the image and nowhere else. I will appreciate the help.
//-------------------------------- 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>
解决方案
you are invoking the "on()" function over the whole document. In order to restrict it to an particular object use $("tag") for an an element instead of $document.
//-------------------------------- 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>
这篇关于如何限制粒子从只有一个对象/位置/文件释放，而不是点击屏幕上的任何位置？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
