【四线框的跟随移动】

效果展示

四线框移动动效

一、布局

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>
相关推荐
王源骏26 分钟前
LayaAir鼠标(手指)控制相机旋转,限制角度
前端
大虾写代码39 分钟前
vue3+TS项目配置Eslint+prettier+husky语法校验
前端·vue·eslint
wordbaby1 小时前
用 useEffectEvent 做精准埋点:React analytics pageview 场景的最佳实践与原理剖析
前端·react.js
上单带刀不带妹1 小时前
在 ES6 中如何提取深度嵌套的对象中的指定属性
前端·ecmascript·es6
excel1 小时前
使用热力贴图和高斯函数生成山峰与等高线的 WebGL Shader 解析
前端
wyzqhhhh1 小时前
组件库打包工具选型(npm/pnpm/yarn)的区别和技术考量
前端·npm·node.js
码上暴富1 小时前
vue2迁移到vite[保姆级教程]
前端·javascript·vue.js
土了个豆子的2 小时前
04.事件中心模块
开发语言·前端·visualstudio·单例模式·c#
全栈技术负责人2 小时前
Hybrid应用性能优化实战分享(本文iOS 与 H5为例,安卓同理)
前端·ios·性能优化·html5
xw52 小时前
移动端调试上篇
前端