鼠标星星跟随

淩亂°似流年 2024-04-07 12:52 104阅读 0赞

> 直接引入以下js文件

function loadJS(url, callback) {
        
      var script = document.createElement('script')
      var fn = callback || function () {
         };
      script.type = 'text/javascript';
      if (script.readyState) {
        
        script.onreadystatechange = function () {
        
          if (script.readyState == 'loaded' || script.readyState == 'complete') {
        
            script.onreadystatechange = null;
            fn();
          }
        };
      } else {
        
        script.onload = function () {
        
          fn();
        };
      }
      script.src = url;
      document.getElementsByTagName('head')[0].appendChild(script);
    }
    
    !(function () {
        
      loadJS("https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js", () => {
        
        xingxing();
      })
    })();
    
    const xingxing = () => {
        
      $("body").append($("<span class='js-cursor-container'></span>"));
      var possibleColors = ["#D61C59", "#E7D84B", "#1B8798", "#F73859", "#14FFEC", "#00E0FF", "#FF99FE", "#FAF15D"]
      var width = window.innerWidth;
      var height = window.innerHeight;
      var cursor = {
         x: width / 2, y: width / 2 };
      var particles = [];
    
      function init() {
        
        bindEvents();
        loop();
      }
      function bindEvents() {
        
        document.addEventListener('mousemove', onMouseMove);
        window.addEventListener('resize', onWindowResize);
      }
    
      function onWindowResize(e) {
        
        width = window.innerWidth;
        height = window.innerHeight;
      }
    
      function onMouseMove(e) {
        
        cursor.x = e.clientX;
        cursor.y = e.clientY;
    
        addParticle(cursor.x, cursor.y, possibleColors[Math.floor(Math.random() * possibleColors.length)]);
      }
    
      function addParticle(x, y, color) {
        
        var particle = new Particle();
        particle.init(x, y, color);
        particles.push(particle);
      }
    
      function updateParticles() {
        
    
        for (var i = 0; i < particles.length; i++) {
        
          particles[i].update();
        }
        for (var i = particles.length - 1; i >= 0; i--) {
        
          if (particles[i].lifeSpan < 0) {
        
            particles[i].die();
            particles.splice(i, 1);
          }
        }
    
      }
    
      function loop() {
        
        requestAnimationFrame(loop);
        updateParticles();
      }
    
      function Particle() {
        
    
        this.character = "*";
        this.lifeSpan = 120;
        this.initialStyles = {
        
          "position": "fixed",
          "display": "inline-block",
          "top": "0px",
          "left": "0px",
          "pointerEvents": "none",
          "touch-action": "none",
          "z-index": "10000000",
          "fontSize": "25px",
          "will-change": "transform"
        };
    
        this.init = function (x, y, color) {
        
    
          this.velocity = {
        
            x: (Math.random() < 0.5 ? -1 : 1) * (Math.random() / 2),
            y: 1
          };
    
          this.position = {
         x: x + 10, y: y + 10 };
          this.initialStyles.color = color;
    
          this.element = document.createElement('span');
          this.element.innerHTML = this.character;
          applyProperties(this.element, this.initialStyles);
          this.update();
    
          document.querySelector('.js-cursor-container').appendChild(this.element);
        };
    
        this.update = function () {
        
          this.position.x += this.velocity.x;
          this.position.y += this.velocity.y;
          this.lifeSpan--;
    
          this.element.style.transform = "translate3d(" + this.position.x + "px," + this.position.y + "px, 0) scale(" + (this.lifeSpan / 120) + ")";
        }
    
        this.die = function () {
        
          this.element.parentNode.removeChild(this.element);
        }
    
      }
    
      function applyProperties(target, properties) {
        
        for (var key in properties) {
        
          target.style[key] = properties[key];
        }
      }
    
      if (!('ontouchstart' in window || navigator.msMaxTouchPoints)) init();
    };

发表评论取消回复

表情：

评论列表（有 0 条评论，104人围观）

还没有评论，来说两句吧...

相关阅读

相关鼠标星星跟随

> 直接引入以下js文件 function loadJS(url, callback) { var script = document.

淩亂°似流年/ 2024年04月07日 12:52/ 0 赞/ 105 阅读

相关跟随鼠标移动的星星✩代码解释✩✩✩

效果： ![在这里插入图片描述][2021042323451389.gif_pic_center_pic_center] 前言：上期发的 [跟随鼠标移动的星

你的名字/ 2023年01月17日 07:46/ 0 赞/ 69 阅读

相关跟随鼠标移动的星星✩直接在页面引用✧✧✧

效果✩： ![在这里插入图片描述][2021042323451389.gif_pic_center] 直接在你的页面引用方法✩： 1.新建一个名为 canvas

╰半夏微凉°/ 2023年01月16日 04:49/ 0 赞/ 55 阅读

相关跟随鼠标的动图

跟随鼠标的动图：先看效果图： ![在这里插入图片描述][2020112016103468.png_pic_center] 核心思路如下： 1. 用mousem

ゞ浴缸里的玫瑰/ 2022年12月21日 11:57/ 0 赞/ 227 阅读

相关图标跟随鼠标

创建一个影片剪辑图标，实例名称输入：cursor\_mc 新图层1，脚本新图层2，影片剪辑图标新图层3，背景图层1帧1，脚本 Mouse.hide()

女爷i/ 2022年07月28日 05:20/ 0 赞/ 199 阅读

相关图片跟随鼠标偏移

> 图片跟随鼠标的移动而移动 1,鼠标移动到图片上,图片变大 ![这里写图片描述][SouthEast] <!DOCTYPE html> <html>

比眉伴天荒/ 2022年06月05日 07:46/ 0 赞/ 245 阅读

相关 canvas实现跟随鼠标和跟随手指粒子特效

原文出处： [https://blog.csdn.net/IForDreams/article/details/75453450][https_blog.csdn.net_IF

妖狐艹你老母/ 2022年05月22日 02:55/ 0 赞/ 282 阅读

相关 jQuery_鼠标跟随效果

鼠标跟随效果： HTML： <body> <img src="images/ts.gif" alt=""> </body> JS： $

Dear 丶/ 2022年05月20日 23:55/ 0 赞/ 238 阅读

相关鼠标跟随事件

<html> <head> <title></title> </head> <body> <script> A=doc

╰半橙微兮°/ 2022年05月18日 00:56/ 0 赞/ 287 阅读

相关 js鼠标跟随特效鼠标滑过出现小星星动画

页面代码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <

约定不等于承诺〃/ 2022年05月17日 20:04/ 0 赞/ 380 阅读