前端开发 之 12个鼠标交互特效上【附完整源码】

前端开发 之 12个鼠标交互特效上【附完整源码】

文章目录

  • 前端开发 之 12个鼠标交互特效上【附完整源码】
      • 一：彩色空心爱心滑动特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 二：彩色实心爱心滑动特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 三：粒子连结特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 四：彩色拖尾特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 五：彩色粒子收回特效
          • 1.效果展示
          • 2.`HTML`完整代码
      • 六：彩色粒子交互特效
          • 1.效果展示
          • 2.`HTML`完整代码

一：彩色空心爱心滑动特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>超级炫酷的爱心滑动特效</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
      background: #222;
    }

    canvas {
      display: block;
    }
  </style>
</head>

<body>
  <canvas></canvas>
  <script>
    var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

    var ww, wh;

    function onResize() {
      ww = canvas.width = window.innerWidth;
      wh = canvas.height = window.innerHeight;
    }

    function randomColor() {
      return `hsla(${Math.random() * 360}, 100%, 60%, 1)`;
    }

    var precision = 100;
    var hearts = [];
    var mouseMoved = false;

    function onMove(e) {
      mouseMoved = true;
      for (let i = 0; i < 5; i++) { // 生成更多的爱心
        let x, y;
        if (e.type === "touchmove") {
          x = e.touches[0].clientX;
          y = e.touches[0].clientY;
        } else {
          x = e.clientX;
          y = e.clientY;
        }
        hearts.push(new Heart(x, y));
      }
    }

    var Heart = function (x, y) {
      this.x = x || Math.random() * ww;
      this.y = y || Math.random() * wh;
      this.size = Math.random() * 4 + 1;
      this.shadowBlur = Math.random() * 20;
      this.speedX = (Math.random() - 0.5) * 10;
      this.speedY = (Math.random() - 0.5) * 10;
      this.speedSize = Math.random() * 0.05 + 0.01;
      this.opacity = 1;
      this.color = randomColor();
      this.vertices = [];
      for (var i = 0; i < precision; i++) {
        var step = (i / precision - 0.5) * (Math.PI * 2);
        var vector = {
          x: (15 * Math.pow(Math.sin(step), 3)),
          y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
        }
        this.vertices.push(vector);
      }
    }

    Heart.prototype.draw = function () {
      this.size -= this.speedSize;
      this.x += this.speedX;
      this.y += this.speedY;
      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.scale(this.size, this.size);
      ctx.beginPath();
      ctx.strokeStyle = this.color;
      ctx.shadowBlur = this.shadowBlur;
      ctx.shadowColor = this.color;
      for (var i = 0; i < precision; i++) {
        var vector = this.vertices[i];
        ctx.lineTo(vector.x, vector.y);
      }
      ctx.globalAlpha = this.size;
      ctx.closePath();
      ctx.stroke();
      ctx.restore();
    };

    function render(a) {
      requestAnimationFrame(render);
      ctx.clearRect(0, 0, ww, wh);
      for (var i = 0; i < hearts.length; i++) {
        hearts[i].draw();
        if (hearts[i].size <= 0) {
          hearts.splice(i, 1);
          i--;
        }
      }
    }

    onResize();
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove);
    window.addEventListener("resize", onResize);
    requestAnimationFrame(render);
  </script>
</body>
</html>

二：彩色实心爱心滑动特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <title>滑动爱心</title>
  <style>
    body {
      overflow: hidden;
      margin: 0;
      background: linear-gradient(to right, #ff9a9e, #fad0c4);
      height: 100vh;
      display: flex;
      justify-content: center;
      align-items: center;
    }

    canvas {
      position: absolute;
      top: 0;
      left: 0;
    }
  </style>
</head>
<body>
  <canvas></canvas>
  <script>
    var canvas = document.querySelector("canvas"),
      ctx = canvas.getContext("2d");

    var ww, wh;

    function onResize() {
      ww = canvas.width = window.innerWidth;
      wh = canvas.height = window.innerHeight;
    }

    var precision = 50;
    var hearts = [];
    var mouseMoved = false;

    function onMove(e) {
      mouseMoved = true;
      var x, y;
      if (e.type === "touchmove") {
        x = e.touches[0].clientX;
        y = e.touches[0].clientY;
      } else {
        x = e.clientX;
        y = e.clientY;
      }
      hearts.push(new Heart(x, y));
    }

    var Heart = function (x, y) {
      this.x = x || Math.random() * ww;
      this.y = y || Math.random() * wh;
      this.size = Math.random() * 2 + 1;
      this.maxSize = this.size * 1.5;
      this.shadowBlur = Math.random() * 15;
      this.speedX = (Math.random() - 0.5) * 4;
      this.speedY = (Math.random() - 0.5) * 4;
      this.alpha = 1;
      this.fadeSpeed = Math.random() * 0.02 + 0.02;
      this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
      this.vertices = [];
      for (var i = 0; i < precision; i++) {
        var step = (i / precision - 0.5) * (Math.PI * 2);
        var vector = {
          x: (15 * Math.pow(Math.sin(step), 3)),
          y: -(13 * Math.cos(step) - 5 * Math.cos(2 * step) - 2 * Math.cos(3 * step) - Math.cos(4 * step))
        }
        this.vertices.push(vector);
      }
    }

    Heart.prototype.draw = function () {
      this.x += this.speedX;
      this.y += this.speedY;
      this.size += (this.maxSize - this.size) * 0.1;
      this.alpha -= this.fadeSpeed;

      ctx.save();
      ctx.translate(this.x, this.y);
      ctx.scale(this.size, this.size);
      ctx.beginPath();
      ctx.moveTo(0, 0);
      for (var i = 0; i < precision; i++) {
        var vector = this.vertices[i];
        ctx.lineTo(vector.x, vector.y);
      }
      ctx.closePath();
      ctx.fillStyle = this.color;
      ctx.globalAlpha = this.alpha;
      ctx.shadowBlur = this.shadowBlur;
      ctx.shadowColor = this.color;
      ctx.fill();
      ctx.restore();
    };

    function render(a) {
      requestAnimationFrame(render);
      ctx.clearRect(0, 0, ww, wh);
      for (var i = 0; i < hearts.length; i++) {
        hearts[i].draw();
        if (hearts[i].alpha <= 0) {
          hearts.splice(i, 1);
          i--;
        }
      }
    }

    onResize();
    window.addEventListener("mousemove", onMove);
    window.addEventListener("touchmove", onMove);
    window.addEventListener("resize", onResize);
    requestAnimationFrame(render);
  </script>
</body>
</html>

三：粒子连结特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Particle System with Cool Effects</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: linear-gradient(45deg, #000, #333);
            animation: bgGradient 10s ease infinite;
        }

        @keyframes bgGradient {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        canvas {
            display: block;
        }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
</body>
<script>
const canvas = document.getElementById('particleCanvas');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

let particlesArray = [];
const numberOfParticles = 50;
const mouse = {
    x: undefined,
    y: undefined,
};
const maxParticleLifeTime = 1; 

class Particle {
    constructor(x, y, initialLife = 1) {
        this.x = x || Math.random() * canvas.width;
        this.y = y || Math.random() * canvas.height;
        this.size = Math.random() * 2 + 1;
        this.speedX = (Math.random() - 0.5) * 2;
        this.speedY = (Math.random() - 0.5) * 2;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        this.alpha = 1;
        this.decay = Math.random() * 0.01 + 0.01;
        this.life = initialLife;
        this.trail = [];
        this.lifeTime = 0; 
    }

    update() {
        this.x += this.speedX;
        this.y += this.speedY;

        if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
        if (this.y > canvas.height || this.y < 0) this.speedY *= -1;

        if (mouse.x && mouse.y) {
            const dx = mouse.x - this.x;
            const dy = mouse.y - this.y;
            const distance = Math.sqrt(dx * dx + dy * dy);
            const force = 1 / distance * 20;
            this.speedX += (dx / distance) * force;
            this.speedY += (dy / distance) * force;
        }

        this.life -= this.decay;
        this.alpha = this.life;
        this.color = `hsl(${(1 - this.life) * 360}, 100%, 50%)`;
        this.lifeTime += 1 / 60; 
        if (this.life <= 0 || this.lifeTime >= maxParticleLifeTime) {
            this.reset();
        }
        this.trail.push({ x: this.x, y: this.y });
        if (this.trail.length > 15) this.trail.shift();

        for (let otherParticle of particlesArray) {
            if (otherParticle !== this) {
                const dx = this.x - otherParticle.x;
                const dy = this.y - otherParticle.y;
                const distance = Math.sqrt(dx * dx + dy * dy);
                if (distance < 50) {
                    const repelForce = 0.1 / distance;
                    this.speedX -= (dx / distance) * repelForce;
                    this.speedY -= (dy / distance) * repelForce;
                }
            }
        }
    }

    draw() {
        ctx.globalAlpha = this.alpha;
        ctx.fillStyle = this.color;

        ctx.beginPath();
        ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
        ctx.closePath();
        ctx.fill();

        ctx.globalAlpha = 0.7 * this.alpha;
        ctx.beginPath();
        for (let i = 0; i < this.trail.length; i++) {
            ctx.lineTo(this.trail[i].x, this.trail[i].y);
        }
        ctx.strokeStyle = this.color;
        ctx.lineWidth = 0.5;
        ctx.stroke();
        ctx.closePath();
    }

    reset() {
        this.x = Math.random() * canvas.width;
        this.y = Math.random() * canvas.height;
        this.size = Math.random() * 2 + 1;
        this.speedX = (Math.random() - 0.5) * 4;
        this.speedY = (Math.random() - 0.5) * 4;
        this.color = `hsl(${Math.random() * 360}, 100%, 50%)`;
        this.alpha = 1;
        this.life = 1;
        this.decay = Math.random() * 0.01 + 0.01;
        this.trail = [];
        this.lifeTime = 0;
    }
}

function init() {
    particlesArray = [];
    for (let i = 0; i < numberOfParticles; i++) {
        particlesArray.push(new Particle());
    }
}

function animate() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);

    for (let particle of particlesArray) {
        particle.update();
        particle.draw();
    }

    requestAnimationFrame(animate);
}

window.addEventListener('resize', function() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    init();
});

window.addEventListener('mousemove', function(event) {
    mouse.x = event.x;
    mouse.y = event.y;
});

window.addEventListener('mouseout', function() {
    mouse.x = undefined;
    mouse.y = undefined;
});

window.addEventListener('click', function(event) {
    for (let i = 0; i < 30; i++) {
        const angle = Math.random() * 2 * Math.PI;
        const distance = Math.random() * 50;
        const x = event.x + Math.cos(angle) * distance;
        const y = event.y + Math.sin(angle) * distance;
        particlesArray.push(new Particle(x, y, 1));
    }
});

init();
animate();
</script>
</html>

四：彩色拖尾特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1234</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
        }

        #trail-container {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
        }

        .particle {
            position: absolute;
            width: 3px; /* 减小粒子大小 */
            height: 3px;
            background-color: #fff;
            border-radius: 50%;
            opacity: 1;
            transform: translate(-50%, -50%);
            pointer-events: none;
            mix-blend-mode: screen;
        }

        /* 为粒子添加一个更快的淡出动画 */
        @keyframes fadeOut {
            0% { opacity: 1; }
            100% { opacity: 0; }
        }

        .particle.fade {
            animation: fadeOut 0.5s ease-out forwards; /* 缩短动画持续时间 */
        }
    </style>
</head>
<body>
    <div id="trail-container"></div>
    <script>
        document.addEventListener('DOMContentLoaded', () => {
            const trailContainer = document.getElementById('trail-container');
            const particles = [];

            // 监听鼠标移动事件
            document.addEventListener('mousemove', (e) => {
                // 在鼠标位置创建粒子
                createParticle(e.clientX, e.clientY);
            });

            // 创建粒子
            function createParticle(x, y) {
                const particle = document.createElement('div');
                particle.classList.add('particle');
                particle.style.left = `${x}px`;
                particle.style.top = `${y}px`;
                // 使用随机颜色或固定颜色
                particle.style.backgroundColor = getRandomColor();
                trailContainer.appendChild(particle);
                particles.push(particle);

                // 几乎立即给粒子添加淡出动画
                setTimeout(() => {
                    particle.classList.add('fade');
                    // 动画结束后移除粒子
                    particle.addEventListener('animationend', () => {
                        particle.remove();
                        particles.splice(particles.indexOf(particle), 1);
                    });
                }, 100); // 非常短的延迟，几乎立即开始淡出
            }

            // 获取随机颜色
            function getRandomColor() {
                const letters = '0123456789ABCDEF';
                let color = '#';
                for (let i = 0; i < 6; i++) {
                    color += letters[Math.floor(Math.random() * 16)];
                }
                return color;
            }

            // 定期清理，动画结束后粒子会自动移除
            setInterval(() => {
                particles.forEach(particle => {
                    if (particle.classList.contains('fade')) {
                        particle.remove();
                        particles.splice(particles.indexOf(particle), 1);
                    }
                });
            }, 1000);
        });
    </script>
</body>
</html>

五：彩色粒子收回特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enhanced Particle System with Gravity and Wind</title>
    <style>
        body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
        }
        #particleCanvas {
            display: block;
            width: 100%;
            height: 100%;
            background: linear-gradient(to bottom, #000000, #111111);
        }
    </style>
</head>
<body>
    <canvas id="particleCanvas"></canvas>
    <script>
        const canvas = document.getElementById('particleCanvas');
        const ctx = canvas.getContext('2d');

        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;

        const particlesArray = [];
        const numberOfParticles = 500; 
        const mouse = {
            x: undefined,
            y: undefined,
        };

        const gravity = 0.05; 
        const wind = {
            x: 0.01, 
            y: 0,
        };

        class Particle {
            constructor() {
                this.x = Math.random() * canvas.width;
                this.y = Math.random() * canvas.height;
                this.size = Math.random() * 5 + 1; 
                this.speedX = (Math.random() - 0.5) * 4; 
                this.speedY = (Math.random() - 0.5) * 4;
                this.color = 'hsl(' + Math.floor(Math.random() * 360) + ', 100%, 50%)';
                this.alpha = 1; 
                this.targetX = this.x;
                this.targetY = this.y;
                this.ease = 0.05;
            }

            update() {
                if (mouse.x !== undefined && mouse.y !== undefined) {
                    this.targetX = mouse.x;
                    this.targetY = mouse.y;
                }
                this.x += (this.targetX - this.x) * this.ease;
                this.y += (this.targetY - this.y) * this.ease;

                this.speedY += gravity;
                this.speedX += wind.x;

                if (this.x > canvas.width || this.x < 0) this.speedX *= -1;
                if (this.y > canvas.height) this.y = canvas.height, this.speedY *= -0.7; 
                this.alpha -= 0.01; 
                if (this.alpha < 0) this.alpha = 0;

                this.draw();
            }

            draw() {
                ctx.globalAlpha = this.alpha;
                ctx.fillStyle = this.color;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }
        }

        function init() {
            for (let i = 0; i < numberOfParticles; i++) {
                particlesArray.push(new Particle());
            }
        }

        function animate() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);

            for (let particle of particlesArray) {
                particle.update();
            }

            requestAnimationFrame(animate);
        }

        window.addEventListener('resize', function() {
            canvas.width = window.innerWidth;
            canvas.height = window.innerHeight;
        });

        window.addEventListener('mousemove', function(event) {
            mouse.x = event.x;
            mouse.y = event.y;
        });

        window.addEventListener('mouseout', function() {
            mouse.x = undefined;
            mouse.y = undefined;
        });

        window.addEventListener('click', function() {
            for (let i = 0; i < 20; i++) {
                particlesArray.push(new Particle());
            }
        });

        init();
        animate();
    </script>
</body>
</html>

六：彩色粒子交互特效

1.效果展示

在这里插入图片描述

2.HTML完整代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>彩色粒子交互特效</title>
</head>
<body>
<script>
    !(function () {
      function n(n, e, t) {
        return n.getAttribute(e) || t;
      }
      function e(n) {
        return document.getElementsByTagName(n);
      }
      function t() {
        var t = e("script"),
          o = t.length,
          i = t[o - 1];
        return {
          l: o,
          z: n(i, "zIndex", -1),
          o: n(i, "opacity", 0.6),
          c: n(i, "color", "0,255,0"), 
          n: n(i, "count", 400), // 粒子的数量
        };
      }

      function o() {
        (a = m.width =
          window.innerWidth ||
          document.documentElement.clientWidth ||
          document.body.clientWidth),
          (c = m.height =
            window.innerHeight ||
            document.documentElement.clientHeight ||
            document.body.clientHeight);
      }
      function i() {
        r.clearRect(0, 0, a, c);
        var n, e, t, o, m, l;
        s.forEach(function (particle, index) {
          for (
            particle.x += particle.xa,
            particle.y += particle.ya,
            particle.xa *= particle.x > a || particle.x < 0 ? -1 : 1,
            particle.ya *= particle.y > c || particle.y < 0 ? -1 : 1,
            // 使用粒子的颜色属性进行绘制
            r.fillStyle = particle.color,
            r.fillRect(particle.x - 0.5, particle.y - 0.5, 1, 1),
            e = index + 1;
            e < u.length;
            e++
          ) {
            (n = u[e]),
              null !== n.x &&
              null !== n.y &&
              ((o = particle.x - n.x),
                (m = particle.y - n.y),
                (l = o * o + m * m),
                l < n.max &&
                (n === y &&
                  l >= n.max / 2 &&
                  ((particle.x -= 0.03 * o), (particle.y -= 0.03 * m)),
                  (t = (n.max - l) / n.max),
                  r.beginPath(),
                  (r.lineWidth = t / 2),
                  // 连线颜色和粒子颜色一致
                  r.strokeStyle = particle.color,
                  r.moveTo(particle.x, particle.y),
                  r.lineTo(n.x, n.y),
                  r.stroke()));
          }
        }),
          x(i);
      }
      var fixedColors = [
        "rgba(255, 0, 0, 1.0)",   // 红色
        "rgba(0, 255, 0, 1.0)",   // 绿色
        "rgba(0, 0, 255, 1.0)",   // 蓝色
        "rgba(255, 255, 0, 1.0)", // 黄色
        "rgba(0, 255, 255, 0.8)", // 青色
        "rgba(255, 0, 255, 0.8)", // 紫色
        "rgba(255, 165, 0, 0.8)", // 橙色
        "rgba(127, 255, 212, 1.0)",
          "rgba(0, 255, 127, 1.0)"
      ];
      var a,
        c,
        u,
        m = document.createElement("canvas"),
        d = t(),
        l = "c_n" + d.l,
        r = m.getContext("2d"),
        x =
          window.requestAnimationFrame ||
          window.webkitRequestAnimationFrame ||
          window.mozRequestAnimationFrame ||
          window.oRequestAnimationFrame ||
          window.msRequestAnimationFrame ||
          function (n) {
            window.setTimeout(n, 1e3 / 45);
          },
        w = Math.random,
        y = { x: null, y: null, max: 2e4 };
      (m.id = l),
        (m.style.cssText =
          "position:fixed;top:0;left:0;z-index:" + d.z + ";opacity:" + d.o),
        e("body")[0].appendChild(m),
        o(),
        (window.onresize = o),
        (window.onmousemove = function (n) {
          (n = n || window.event), (y.x = n.clientX), (y.y = n.clientY);
        }),
        (window.onmouseout = function () {
          (y.x = null), (y.y = null);
        });

        //固定颜色
        for (var s = [], f = 0; d.n > f; f++) {
        var h = w() * a,
          g = w() * c,
          v = 2 * w() - 1,
          p = 2 * w() - 1,
          // 从固定颜色数组中随机选择一个颜色
          color = fixedColors[Math.floor(Math.random() * fixedColors.length)];
        s.push({ x: h, y: g, xa: v, ya: p, max: 6e3, color: color }); // 使用选定的固定颜色
      }

      (u = s.concat([y])),
        setTimeout(function () {
          i();
        }, 100);
    })();
  </script>
</body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：/a/941664.html

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

解析mysqlbinlog

解析mysqlbinlog

一、前置设置 ps -ef | grep mysql 查看mysql进程对应的安装目录 需设置mysql binlog日志模式为 ROW 二、执行命令 [rootlocalhost bin]# mysqlbinlog --verbose --base64-outputdecode-rows /usr/local/mysql/data/binlog.000069 > 1.sql 查看文件具体内容
阅读更多...
理解神经网络

理解神经网络

神经网络是一种模拟人类大脑工作方式的计算模型&#xff0c;是深度学习和机器学习领域的基础。 基本原理 神经网络的基本原理是模拟人脑神经系统的功能&#xff0c;通过多个节点&#xff08;也叫神经元&#xff09;的连接和计算&#xff0c;实现非线性模型的组合和输出。每个…
阅读更多...
基于Vue.js和SpringBoot的笔记记录分享网站的设计与实现（文末附源码）

基于Vue.js和SpringBoot的笔记记录分享网站的设计与实现（文末附源码）

博主介绍&#xff1a;✌全网粉丝50W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术范围&#xff1a;SpringBoot、Vue、SSM、HLM…
阅读更多...
信息安全管理与评估赛题第9套

信息安全管理与评估赛题第9套

全国职业院校技能大赛 高等职业教育组 信息安全管理与评估 赛题九 模块一 网络平台搭建与设备安全防护 1 赛项时间 共计180分钟。 2 赛项信息 竞赛阶段 任务阶段 竞赛任务 竞赛时间 分值 第一阶段 网络平台搭建与设备安全防护 任务1 网络平台搭建 XX:XX- XX:XX 50 任务2…
阅读更多...
怎么在idea中创建springboot项目

怎么在idea中创建springboot项目

最近想系统学习下springboot&#xff0c;尝试一下全栈路线 从零开始&#xff0c;下面将叙述下如何创建项目 环境 首先确保自己环境没问题 jdkMavenidea 创建springboot项目 1.打开idea&#xff0c;选择file->New->Project 2.选择Spring Initializr->设置JDK->…
阅读更多...
【计算机视觉基础CV-图像分类】05 - 深入解析ResNet与GoogLeNet：从基础理论到实际应用

【计算机视觉基础CV-图像分类】05 - 深入解析ResNet与GoogLeNet：从基础理论到实际应用

引言 在上一篇文章中&#xff0c;我们详细介绍了ResNet与GoogLeNet的网络结构、设计理念及其在图像分类中的应用。本文将继续深入探讨如何在实际项目中应用这些模型&#xff0c;特别是如何保存训练好的模型、加载模型以及使用模型进行新图像的预测。通过这些步骤&#xff0c;读…
阅读更多...
【CDN】快速了解CDN是什么？以及工作原理和应用场景

【CDN】快速了解CDN是什么？以及工作原理和应用场景

快速了解CDN是什么&#xff1f;以及工作原理和应用场景 一、什么是CDN&#xff1f;CDN相关的术语解释 二、CDN工作原理三、CDN与传统网站的区别四、CDN的作用和意义五、CDN的应用场景 一、什么是CDN&#xff1f; CDN英文全称Content Delivery Network&#xff0c;中文翻译即为内…
阅读更多...
leetcode 2295.替换数组中的元素

leetcode 2295.替换数组中的元素

1.题目要求: 2.题目代码: class Solution { public:vector<int> arrayChange(vector<int>& nums, vector<vector<int>>& operations){map<int,int> element_index;//创建图存入元素和元素对应的下标for(int i 0;i < nums.size()…
阅读更多...
clickhouse-题库

clickhouse-题库

1、clickhouse介绍以及架构 clickhouse一个分布式列式存储数据库&#xff0c;主要用于在线分析查询 2、列式存储和行式存储有什么区别&#xff1f; 行式存储&#xff1a; 1&#xff09;、数据是按行存储的 2&#xff09;、没有建立索引的查询消耗很大的IO 3&#xff09;、建…
阅读更多...
记录一个SVR学习

记录一个SVR学习

1、为什么使用jupter来做数据预测&#xff1f;而不是传统pycharm编辑器 1、Jupyter Notebook 通过anaconda统一管理环境&#xff0c;可以运行python、R、Sql等数据分析常用语言。 2、做到交互式运行&#xff0c;可以逐步运行代码块&#xff0c;实时查看结果&#xff0c;便于调…
阅读更多...
【WRF教程第3.2期】预处理系统 WPS详解：以4.5版本为例

【WRF教程第3.2期】预处理系统 WPS详解：以4.5版本为例

预处理系统 WPS 详解&#xff1a;以4.5版本为例 WPS 嵌套域&#xff08;WPS Nested Domains&#xff09;USGS 和 MODIS 土地利用重力波拖拽方案静态数据&#xff08;Gravity Wave Drag Scheme Static Data&#xff09;1. 什么是重力波拖拽方案&#xff08;GWDO&#xff09;静态…
阅读更多...
Stealthy Attack on Large Language Model based Recommendation

Stealthy Attack on Large Language Model based Recommendation

传统RS依赖id信息进行推荐&#xff0c;攻击&#xff1a;生成虚假用户&#xff0c;这些用户对特定目标物体给于高评价&#xff0c;从而影响模型的训练。 基于llm的RS&#xff1a;llm利用语义理解&#xff0c;将用户兴趣转化为语义向量&#xff0c;通过计算用户兴趣向量与物品向…
阅读更多...
Pytorch | 从零构建EfficientNet对CIFAR10进行分类

Pytorch | 从零构建EfficientNet对CIFAR10进行分类

Pytorch | 从零构建EfficientNet对CIFAR10进行分类 CIFAR10数据集EfficientNet设计理念网络结构性能特点应用领域发展和改进 EfficientNet结构代码详解结构代码代码详解MBConv 类初始化方法前向传播 forward 方法 EfficientNet 类初始化方法前向传播 forward 方法 训练过程和测…
阅读更多...
【Linux 网络 (五)】Tcp/Udp协议

【Linux 网络 (五)】Tcp/Udp协议

Linux 网络 一前言二、Udp协议1&#xff09;、Udp协议特点2&#xff09;、Udp协议格式3&#xff09;、Udp报文封装和解包过程4&#xff09;、UDP的缓冲区 三、TCP协议1&#xff09;、TCP协议特点2&#xff09;、TCP协议格式1、4位首部长度、源端口、目的端口2、16位窗口大小3、…
阅读更多...
重温设计模式--命令模式

重温设计模式--命令模式

文章目录 命令模式的详细介绍C 代码示例C代码示例2 命令模式的详细介绍 定义与概念 命令模式属于行为型设计模式&#xff0c;它旨在将一个请求封装成一个对象&#xff0c;从而让你可以用不同的请求对客户端进行参数化&#xff0c;将请求的发送者和接收者解耦&#xff0c;并且能…
阅读更多...
Python langchain ReAct 使用范例

Python langchain ReAct 使用范例

0. 介绍 ReAct: Reasoning Acting &#xff0c;ReAct Prompt 由 few-shot task-solving trajectories 组成&#xff0c;包括人工编写的文本推理过程和动作&#xff0c;以及对动作的环境观察。 1. 范例 langchain version 0.3.7 $ pip show langchain Name: langchain Ver…
阅读更多...
Java设计模式 —— 【结构型模式】外观模式详解

Java设计模式 —— 【结构型模式】外观模式详解

文章目录 概述结构案例实现优缺点 概述 外观模式又名门面模式&#xff0c;是一种通过为多个复杂的子系统提供一个一致的接口&#xff0c;而使这些子系统更加容易被访问的模式。该模式对外有一个统一接口&#xff0c;外部应用程序不用关心内部子系统的具体的细节&#xff0c;这…
阅读更多...
【自用】通信内网部署rzgxxt项目_01，后端pipeDemo部署（使用nssm.exe仿照nohup）

【自用】通信内网部署rzgxxt项目_01，后端pipeDemo部署（使用nssm.exe仿照nohup）

做完这些工作之后&#xff0c;不要忘记打开 Windows Server 的防火墙端口&#xff0c;8181、8081、8080、22、443、1521 做完这些工作之后&#xff0c;不要忘记打开 Windows Server 的防火墙端口&#xff0c;8181、8081、8080、22、443、1521 做完这些工作之后&#xff0c;不要…
阅读更多...
Apache RocketMQ 5.1.3安装部署文档

Apache RocketMQ 5.1.3安装部署文档

官方文档不好使&#xff0c;可以说是一坨… 关键词&#xff1a;Apache RocketMQ 5.0 JDK 17 废话少说&#xff0c;开整。 1.版本 官网地址&#xff0c;版本如下。 https://rocketmq.apache.org/download2.配置文件 2.1namesrv端口 在ROCKETMQ_HOME/conf下 新增namesrv.pro…
阅读更多...
【网络安全】网站常见安全漏洞—服务端漏洞介绍

【网络安全】网站常见安全漏洞—服务端漏洞介绍

文章目录 网站常见安全漏洞—服务端漏洞介绍引言1. 第三方组件漏洞什么是第三方组件漏洞&#xff1f;如何防范&#xff1f; 2. SQL 注入什么是SQL注入&#xff1f;如何防范&#xff1f; 3. 命令执行漏洞什么是命令执行漏洞&#xff1f;如何防范&#xff1f; 4. 越权漏洞什么是越…
阅读更多...
最新文章

Copyright @ 2022~2023