四角光标跟随鼠标, 鼠标落在哪个图片上, 光标就跟随到哪张图片 (一种实现思路)

时间：2024-08-09 11:27:07浏览次数：10

标签：borderPadding 鼠标 -- 光标跟随 height width var position 图片

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta
    name="viewport"
    content="width=device-width, initial-scale=1.0"
  >
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html {
      --gap: 20px;
      /* 图片宽度 */
      --width: 20px;
      /* 图片高度 */
      --height: 20px;
      --top: 0;
      --left: 0;
      /* 图片间距 */
      --padding: 10px;
      /* 图片边框宽高 */
      --border: 40px;
      /* 图片边框颜色 */
      --borderColor: transparent;
      /* 图片边框内边距 */
      --borderPadding: -10px;
      --borderPadding2: 10px;
      /* 图片边框宽度 */
      --borderWidth: 3px;
    }

    .container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: var(--gap);
      padding: var(--gap);
      position: relative;
    }

    .pointer {
      position: absolute;
      top: var(--top);
      left: var(--left);
      z-index: 1;
      width: var(--width);
      height: var(--height);
      transition: all .28s;


      .top {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }

      .left {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          left: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }
      }

      .right {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          top: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }

      .bottom {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;

        &::before {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--border);
          height: var(--borderWidth);
          background-color: var(--borderColor);
        }

        &::after {
          content: '';
          position: absolute;
          bottom: var(--borderPadding);
          right: var(--borderPadding);
          width: var(--borderWidth);
          height: var(--border);
          background-color: var(--borderColor);
        }
      }
    }

    .container div {
      /* background: pink; */
      /* height: calc(100vw / 3); */
    }

    .container div img {
      width: 100%;
      height: auto;
    }
  </style>
</head>

<body>
  <div class="container">
    <div class="pointer">
      <div class="top"></div>
      <div class="left"></div>
      <div class="right"></div>
      <div class="bottom"></div>
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=1"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=2"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=3"
        alt=""
      >
    </div>

    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=4"
        alt=""
      >
    </div>



    <div>
      <img
        src="https://picsum.photos/200/200.webp?random=5"
        alt=""
      >
    </div>
  </div>

  <script>
    const imgs = document.querySelectorAll('.container img');
    imgs[0].onload = function () {
      setProperty(imgs[0])
    }



    // 根据元素设置css变量值
    function setProperty(el) {
      const rect = el.getBoundingClientRect();
      const { width, height, top, left } = rect;
      const color = `rgb(${parseInt(Math.random() * (2 << 7))},${parseInt(Math.random() * (2 << 7))},${parseInt(Math.random() * (2 << 7))})`
      const settings = [
        ['--top', top + 'px'],
        ['--left', left + 'px'],
        ['--borderColor', color],
        ['--width', width + 'px'],
        ['--height', height + 'px']
      ]
      settings.forEach(item => {
        document.documentElement.style.setProperty(item[0], item[1]);
      })
    }
    // 设置css变量值

    window.onresize = () => {
      setProperty(imgs[0])
    }

    imgs.forEach(el => {
      el.addEventListener('mouseenter', () => {
        setProperty(el)
      })
    })
  </script>
</body>

</html>

标签：borderPadding,鼠标,--,光标跟随,height,width,var,position,图片
From： https://www.cnblogs.com/fmg0224/p/18350491

注册表修改鼠标右键菜单
文件/文件夹右键菜单:HKEY_CLASSES_ROOT*\shellHKEY_CLASSES_ROOT\Directory\shellHKEY_CLASSES_ROOT\Folder\shell驱动器右键菜单:HKEY_CLASSES_ROOT\Drive\shell桌面右键菜单:HKEY_CURRENT_USER\Software\Microsoft\Windows\CurrentVersion\Policies\Explorer\NoDesktop......
轮换挑选图片,补充 es6的对象写法,uniapp使用,class和style,条件渲染,列表渲染,input
Ⅰ轮换挑选图片【一】方式一<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title>Title</title><scriptsrc="./js2/vue.js"></script></head><body>......
免费将图片转为pdf的软件有哪些？国内外6款免费pdf转换器集合！
如今，随着文件的兼容性、安全性和专业性呈现出更高的需求，pdf文件变得异常重要。想要轻松共享文件并确保高度打印兼容性的人，都会选择将文件转换为pdf格式。而现在，转换这一任务并不复杂，因为在市场上已经存在了多款免费将图片转为pdf的转换可用。通过本文介绍的这些国内外6款免费pd......
qt 输入一张图片，在图片上绘制后，再另存为图片
boolDdrawCircleOnImage(constQString&inputImagePath,constQString&outputImagePath,QVector<QPoint>dotData){if(inputImagePath.isEmpty()||outputImagePath.isEmpty()){qWarning("输入图片路径无效！");retur......
微信小程序-如何解决onShareAppMessage转发gif格式图片不展示？【亲测有效】
1、开发小程序过程中，如果使用gif，在微信开发者工具中是可以正确显示图片的，但是发布之后，在真机上体验就不行了，无法显示分享的图片，对方也无法看到图片。2、查看文档，发现微信小程序分享的时候，自定义的图片类型只支持：PNG，JPG。不能支持，gif。3、如何解决呢？机密也在文档中，亲测有效，完美解......
使用SixLabors.ImageSharp 进行图片的缩放C#.net core，可跨平台运行
引用命令空间usingSixLabors.ImageSharp;using SixLabors.ImageSharp.Formats.Png;using SixLabors.ImageSharp.Processing; publicstaticvidResize(byte[]imageBytes,intwidth=400){usingvarsteam=newMemoryStream(imageBytes);using(varimage=......
LLM大模型：LLaVa多模态图片检索原理
训练安全垂直领域的LLM，会用到很多著名安全论坛(52pojie\kanxue\xianzhi\freebuf等)、博客的数据，这些数据100%都有很多图片（文不如图嘛，图片比文字更直观，更容易表达业务意义），之前微调LLM只能使用文字，图片只能丢弃，非常可惜，需要利用多模态的技术充分提取图片信息！ 1、以前做传......
图片表格内容识别转换-II - 华为机试真题题解（Java）
考试平台：时习知分值：200分考试时间：两小时（共2题）题目描述华为云推出了“通用表格识别”服务，可以将图片表格转换成文本数据。请你将文本数据进一步转换为“文本型表格”，如下图所示：输入现给出一个图片表格的文本数据:每行数据形如line3col1A，表示第3行第1列的单......
高性能图片懒加载
之前都是监听页面滚动，使用window.addEventListener("scroll", () => {})然后判断图片是否进入可视区域，在进行加载图片（data-src自定义属性，赋值给src属性）这里介绍一个高性能的图片懒加载方式，浏览器原生自带的IntersectionObserverAPI（兼容性也挺好），用于异步检测目标元素与父级......
springboot集成 AI 实现图片辅助设计功能
springboot集成AI实现图片辅助设计功能在SpringBoot中实现一个图片辅助设计功能，通常会涉及到图像处理、计算机视觉以及机器学习（AI）技术的应用。这样的系统可以帮助用户进行图像编辑、风格转换、自动设计布局等。以下是一个基本步骤和技术栈建议，用于在SpringBoot中构建图......

四角光标跟随鼠标, 鼠标落在哪个图片上, 光标就跟随到哪张图片 (一种实现思路)

相关文章

赞助商

阅读排行