setInterval 鼠标移动轨迹

Question

在我的代码中，我想创建一个鼠标轨迹，其中包含 1) 随机图像 2) 模糊效果 3) 不透明度过渡 4) 轨迹中最大数量的 div。

类似这样： https://tympanus.net/Development/ImageTrailEffects/

第 2 点和第 3 点已完成，但我仍停留在第 4 点。路径现在有疯狂的频闪效果，我不喜欢。 我希望它不那么敏感，更微妙。 对它们的某种限制。 我已经添加了一个计数器，我可以在其中计算创建的 div 的数量，但我不确定并且不知道现在该做什么。 我看过 setInterval，但是当我将它应用到我的 function 时它不起作用

我在为随机背景创建数组时也遇到了一些问题，但我相信我会解决的。 问题主要是关于如何限制和控制轨迹的创建，但如果有人有关于如何创建随机背景图像的提示/链接，我会洗耳恭听。

这是我到目前为止的代码

window.onload= function() {
window.addEventListener('mousemove', function(e) {

    var animate= function(i) {
        var image= document.createElement('div'); //create a div named bubble
  image.classList.add('trail');
        var size= 60;
        var sizepx= size+'px';
  image.style.transition='2s ease';
        image.style.position= 'fixed';
  
        image.style.top=  e.pageY - size/2 + 'px';
        image.style.left= e.pageX - size/2 + 'px';
        
  image.style.width= sizepx;
        image.style.height= sizepx;
        
 
 
        image.style.background= 'hsla(' +
        Math.round(Math.random()*360) + ', ' +
        '100%, ' +
        '50%';
          
  // image.style.background= 'black';
  image.style.border= 'white 1px solid';
  
  image.style.pointerEvents= 'none';
        image.style.zIndex= 1;
        document.body.appendChild(image);
  
  //opacity and blur animations
    window.setTimeout(function() {
            image.style.opacity = 0;
    image.style.filter = 'blur(6px)';
        }, 80);   

        window.setTimeout(function() {
            document.body.removeChild(image);
        }, 2100);
 }; 

var numItems = document.querySelectorAll('.trail').length;

console.log(numItems);

    for (var i= 1; i <= 1; i+= 1) {
        animate(i);
    }
});
};

小提琴： https://jsfiddle.net/opufnsvz/

Answer 1

go 伙计（我使用 Unsplash 作为随机图像源），动态加载图像会产生不需要的效果，因此必须预加载它们。 您可以更改timesPerSecond来控制频率

 const numberOfImages = 10; const imageSources = Array.from(Array(numberOfImages).keys()).map((i) => 'https://source.unsplash.com/collection/9948714?' + i); // how many times to fire the event per second const timesPerSecond =.1; function preloadImages(images) { for (i = 0; i < images.length; i++) { let l = document.createElement('link') l.rel = 'preload' l.as = 'image' l.href = images[i] document.head.appendChild(l); } } function animate(e) { var image= document.createElement('div'); //create a div named bubble image.classList.add('trail'); var size= 60; var sizepx= size+'px'; image.style.transition='2s ease'; image.style.position= 'fixed'; image.style.top= e.pageY - size/2 + 'px'; image.style.left= e.pageX - size/2 + 'px'; image.style.width= sizepx; image.style.height= sizepx; image.style.backgroundImage = 'url(https://source.unsplash.com/collection/9948714?'+ Math.floor(Math.random()*numberOfImages) +')'; image.style.backgroundSize = 'cover'; image.style.border= 'white 1px solid'; image.style.pointerEvents= 'none'; image.style.zIndex= 1; document.body.appendChild(image); //opacity and blur animations window.setTimeout(function() { image.style.opacity = 0; image.style.filter = 'blur(6px)'; }, 80); window.setTimeout(function() { document.body.removeChild(image); }, 2100); }; window.onload= function() { preloadImages(imageSources); var wait = false; window.addEventListener('mousemove', function(e) { if (;wait) { wait = true, setTimeout(() => { wait = false }; timesPerSecond * 1000); animate(e); } }); };