javascript - 为什么单击鼠标时看不到彩球？

标签 javascript jquery css mouseclick-event onmouseclick

这是我正在测试的代码=>
我遵循了所有内容，但无法将结果作为预览，一切正常，但我认为色球不可见 请帮我解决我缺少实际代码的地方？我一次又一次地撞到我的头并尝试但没有用! p.s. 我也在本地和 js fiddle 中尝试过，但都不起作用 -> https://jsfiddle.net/mhLjps6q/ 这是

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);  
}
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;
}
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<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>

`

最佳答案

找到了为什么它不能在你的本地主机和 JSFiddle 上工作的错误。

你的 JS 代码应该以 $(document).ready(function()

使用我的代码并尝试在您的本地主机和 JSFiddle 上运行它，它会起作用。

<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>

关于javascript - 为什么单击鼠标时看不到彩球？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44984829/

上一篇：html - Chrome/Edge 和 Firefox 中的不同图像渲染

下一篇：CSS 影响内部元素

相关文章：

javascript - 无法设置未定义的 CSS DOM 的属性

html - 如何停止突出显示 Wordpress 中的下拉菜单？

html - Markdown 和图像对齐

javascript - 如何使用 JavaScript 将输入字段设置为只读？

javascript - LocalStack - CloudFormation 返回错误代码 : 500

javascript - 关于 anchor 标记的文本更改，使用 JavaScript 显示/隐藏 div

javascript - 将 Canvas 图像复制到框架中

javascript - 如何使用 jQuery 提取以 "xxx-"开头的类的一部分

javascript - 在 Meteor App 中查看页面源代码显示包含许多脚本

javascript - 如何使用 jquery 根据日期条件更改 css？

©2024 IT工具网  联系我们