【四线框的跟随移动】

岩岩很哇塞！2024-10-26 20:31

效果展示

四线框移动动效

一、布局

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>