-2
我想停止屏幕底部的這些粒子，或者防止它們永遠落在屏幕下方。代碼要求解決在屏幕底部收集的所有顆粒。請運行下面的演示並點擊「粒子」文本。當顆粒產生時，它們需要收集在底部。如何限制粒子在屏幕底部永遠掉落？
//-------------------------------- 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>我希望你們可以很容易地解決這個問題 謝謝！
代碼太多了。只需發佈你所面臨的代碼所需的＆breif代碼片段即可。請參閱https://stackoverflow.com/help/mcve –
運行演示程序，您將瞭解我面臨的問題。 –
我認爲你應該把這個問題簡化爲不太具體的代碼，並且更適用於其他用戶。像「如何停止視口底部的動畫」，類似的東西。按照現狀，主持人*可以*編輯問題，但問題很多。嘗試編輯以便閱讀和回答。 –