【四线框的跟随移动】

效果展示

四线框移动动效

一、布局

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>
相关推荐
Mr_Mao1 小时前
Naive Ultra:中后台 Naive UI 增强组件库
前端
前端小趴菜053 小时前
React-React.memo-props比较机制
前端·javascript·react.js
摸鱼仙人~4 小时前
styled-components:现代React样式解决方案
前端·react.js·前端框架
sasaraku.5 小时前
serviceWorker缓存资源
前端
RadiumAg6 小时前
记一道有趣的面试题
前端·javascript
yangzhi_emo6 小时前
ES6笔记2
开发语言·前端·javascript
yanlele6 小时前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子7 小时前
React状态管理最佳实践
前端
烛阴7 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子7 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端