Javascript 为什么鼠标单击时颜色球不可见?
这是我正在测试的代码=> 我跟踪了所有的东西,但不能作为预览结果,一切都很好,但彩色球不可见,我想 请帮我找出我丢失的实际代码?我一次又一次地敲我的头,试着去敲,但是没有用! p、 我也试过本地和js小提琴,但都不起作用-> 这是 var d=文件,$d=$d, w=窗口,$w=$w, 宽度=$w.宽度,宽度=$w.高度, 信用=$'。信用>a', 粒子=$'。粒子', particleCount=0, 尺寸=[ 15, 20, 25, 35, 45 ], 颜色=[ ‘f44336’、‘e91e63’、‘9c27b0’、‘673ab7’、‘3f51b5’, ‘2196f3’、‘03a9f4’、‘00bcd4’、‘009688’、‘4CAF50’, ‘8BC34A’、‘CDDC39’、‘FFB3B’、‘FFC107’、‘FF9800’, ‘FF5722’、‘795548’、‘9E9E9E’、‘607D8B’、‘777777’ ], mouseX=$w.width/2,mouseY=$w.height/2; 函数updateParticleCount{ $'.particle count>.number'.textparticleCount; }; $w .在“调整大小”功能上{ wWidth=$w.width; wHeight=$w高度; }; 美元 .在“mousemove touchmove”上,函数事件{ 违约事件; 事件。停止传播; mouseX=event.clientX; mouseY=event.clientY; if!!event.originalEvent.touchs{ mouseX=event.originalEvent.touchs[0].clientX; mouseY=event.originalEvent.touchs[0].clientY; } } .在“mousedown touchstart”上,函数事件{ 如果event.target==credit.get0{ 回来 } mouseX=event.clientX; mouseY=event.clientY; if!!event.originalEvent.touchs{ mouseX=event.originalEvent.touchs[0].clientX; mouseY=event.originalEvent.touchs[0].clientY; } var定时器=设置间隔功能{ 美元 .一个“mouseup mouseleave touchend touchcancel touchleave”功能{ 清除间隔计时器; } 创建粒子事件; }, 1000 / 60 }; 函数createParticle事件{ 变量粒子=$, 尺寸=尺寸[Math.floorMath.random*尺寸.长度], 颜色=颜色[Math.floorMath.random*colors.length], 负=大小/2, speedHorz=Math.random*10, 加速比=Math.random*25, spinVal=360*Math.random, 自旋速度=36*Math.random*Math.random.particle{ 边界半径:100%; 背景:透明; 位置:绝对位置; 背景大小:100%100%; 背景重复:无重复; } .particles>.particle.minger{ 宽度:5px; 高度:5px; } .particles>.particle.small{ 宽度:10px; 高度:10px; } .particles>.particle.normal{ 宽度:15px; 高度:15px; } .particles>.particle.big{ 宽度:20px; 高度:20px; } .particles>.particle.biger{ 宽度:25px; 高度:25px; } 粒子! 单击/触摸任意位置 0 粒子 创建人Javascript 为什么鼠标单击时颜色球不可见?,javascript,jquery,css,mouseclick-event,onmouseclick,Javascript,Jquery,Css,Mouseclick Event,Onmouseclick,这是我正在测试的代码=> 我跟踪了所有的东西,但不能作为预览结果,一切都很好,但彩色球不可见,我想 请帮我找出我丢失的实际代码?我一次又一次地敲我的头,试着去敲,但是没有用! p、 我也试过本地和js小提琴,但都不起作用-> 这是 var d=文件,$d=$d, w=窗口,$w=$w, 宽度=$w.宽度,宽度=$w.高度, 信用=$'。信用>a', 粒子=$'。粒子', particleCount=0, 尺寸=[ 15, 20, 25, 35, 45 ], 颜色=[ ‘f44336’、‘e91
找到了无法在本地主机和JSFIDLE上运行的错误 您应该使用$document.readyfunction启动JS代码 使用我的代码并尝试在本地主机和JSFIDLE上运行它,它会工作的
<html>
<head>
<title>PARTICLES</title>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(document).ready(function(){
var d = document, $d = $(d),
w = window, $w = $(w),
wWidth = $w.width(), wHeight = $w.height(),
credit = $('.credit > a'),
particles = $('.particles'),
particleCount = 0,
sizes = [
15, 20, 25, 35, 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 / 60)
});
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 = ((36 * 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>
<style>
html, body {
background: #fff;
width: 100%;
height: 100%;
overflow: hidden;
cursor: default;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-family: 'PT Sans', sans-serif;
}
.title {
font-size: 10vw;
font-weight: 700;
text-align: center;
margin-top: 15%;
color: #444;
}
.subtitle {
font-size: 4vw;
color: #777;
font-weight: normal;
text-align: center;
margin-top: 0;
}
.credit {
position: absolute;
bottom: 5px;
width: 100%;
display: block;
text-align: center;
color: #777;
}
.credit > a {
color: #777;
}
.particle-count {
display: block;
text-align: center;
margin: 25px 0;
}
.particles > .particle {
border-radius: 100%;
background: transparent;
position: absolute;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.particles > .particle.smaller {
width: 5px;
height: 5px;
}
.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;
}
</style>
</head>
<body>
<h1 class='title'>PARTICLES!</h1>
<h4 class='subtitle'>Click / Touch Anywhere</h4>
<div class='particle-count'>
<span class='number'>0</span>
Particles
</div>
<span class='credit'>
Created by
<a href='https://twitter.com/Shawn_Sauce' target='_blank'>Shawn G.</a>
</span>
<div class='particles'></div>
</body>
</html>
您的颜色球在我的浏览器Mozilla和chrome中可见。注意:对meworks很好,对JSFiddleyep不起作用,对我也不起作用,但对local和js fiddle不起作用:/您能找到区别吗?是的,当然,我怎么忘记了…该死!简单的错误…Thanx Buddle!