【发布时间】：2017-05-28 17:04:07
【问题描述】：
这是粒子喷泉系统，我想在按住鼠标点击时停止释放粒子。即使我长时间单击并按住按钮，也只能单击一次。
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
sizes = [
45
],
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 timer = setInterval(function () {
$d
.one('mouseup mouseleave touchend touchcancel touchleave', function () {
clearInterval( timer );
})
createParticle( event );
}, 1000 / 30)
});
function createParticle ( event ) {
var particle = $('<div class="particle"/>'),
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) + .25,
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);
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>这是粒子喷泉系统，我想在按住鼠标点击时停止释放粒子。即使我长时间单击并按住按钮，也只能单击一次。
【问题讨论】：
-
你最后一段中的文字似乎矛盾：当我一直按住时停止释放......应该可以工作......甚至......按住按钮。您希望它在按住鼠标按钮时停止或工作？
-
sn-p 能正常工作吗？它不适合我，但你的想法看起来很有趣，所以我希望看到它付诸实践。如果我了解您的需求-假设它是“当我按住鼠标按钮一段时间后停止喷泉”，那么您可能希望在 mousedown 事件上使用 setTimeout() 并在鼠标向上使用 clearTimeout() 。首先，您设置了喷泉应该观察到的一些全局“停止”变量，然后在 mouseup 上重置它。同样在 mouseup 上，您可以清除计时器以防它尚未触发。
标签： javascript jquery