【四线框的跟随移动】

效果展示

四线框移动动效

一、布局

javascript 复制代码
// 布局
<template>
    <div class="container">
        <!-- pointer线框 -->
        <div class="pointer"></div> 
        <div class="item">
            <img src="../assets/imgs/apple.jpg" alt="" />
        </div>
        <div class="item">
            <img src="../assets/imgs/dh.jpg" alt="" />
        </div>
        <div class="item">
            <img src="../assets/imgs/egg.jpg" alt="" />
        </div>
        <div class="item">
            <img src="../assets/imgs/fu.jpg" alt="" />
        </div>
        <div class="item">
            <img src="../assets/imgs/psc.png" alt="" />
        </div>
    </div>
</template>

二、样式

javascript 复制代码
// 样式

<style scoped>
.container {
    position: relative;
    display: grid;
    grid-column-gap: 50px;
    grid-template-columns: auto auto auto;
}

.pointer {
    position: absolute;
    --l: 30px; /*四角线框长度 */
    --t: 3px; /*四角线框粗细 */
    --g: 15px; /*线框与图片的间隙 */
    --s: 240px; /*图片尺寸 */
    --x: 0px; /*图片左上角横坐标 */
    --y: 0px; /*图片左上角纵坐标 */
    width: calc(var(--s) + var(--g) * 2);
    height: calc(var(--s) + var(--g) * 2);
    border: var(--t) solid #fff;
    left: calc(var(--x) - var(--g));
    top: calc(var(--y) - var(--g));
    transition: 0.2s;
    mask: conic-gradient(at var(--l) var(--l), transparent 75%, blue 75% 100%) 0
        0 / calc(100% - var(--l)) calc(100% - var(--l)) repeat;
        /*mask去除 conic-gradient锥形渐变*/
}

.item {
    margin: 20px 0;
    width: 240px;
    height: 240px;
}
img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    cursor: pointer;
    display: block;
}
</style>

三、交互

javascript 复制代码
// 交互
<script setup>
import { onMounted } from 'vue'

onMounted(() => {
    const imgs = document.querySelectorAll('.container img')
    const pointer = document.querySelector('.pointer')

    for (const img of imgs) {
        img.onmouseenter = () => {
            pointer.style.setProperty('--s', img.offsetWidth + 'px')
            pointer.style.setProperty('--x', img.offsetLeft + 'px')
            pointer.style.setProperty('--y', img.offsetTop + 'px')
        }
    }
})
</script>
相关推荐
然我5 分钟前
链表指针玩不转?从基础到双指针,JS 实战带你破局
前端·数据结构·算法
江城开朗的豌豆6 分钟前
组件封装实战:如何设计灵活又好用的前端组件?
前端·javascript·vue.js
EndingCoder14 分钟前
算法与前端的可访问性
前端·算法·递归·树形结构
brzhang21 分钟前
别再梭哈 Curosr 了!这 AI 神器直接把需求、架构、任务一条龙全干了!
前端·后端·架构
Kagol29 分钟前
TinyEditor v4.0 alpha 版本发布,更强大的表格、更丰富的表情、体验更好的图片/视频/文件上传功能
前端·开源
然我39 分钟前
路由还能这么玩?从懒加载到路由守卫,手把手带你解锁 React Router 进阶技巧
前端·react.js·面试
良木林2 小时前
JavaScript书写基础和基本数据类型
开发语言·前端·javascript
brzhang8 小时前
我操,终于有人把 AI 大佬们 PUA 程序员的套路给讲明白了!
前端·后端·架构
止观止9 小时前
React虚拟DOM的进化之路
前端·react.js·前端框架·reactjs·react
goms9 小时前
前端项目集成lint-staged
前端·vue·lint-staged