Vue3로 돋보기 기능 구현하기(마우스에 따라다니며 확대하기)

돋보기 기능 구현하기!!

귀여운건 크게 볼 수 있도록 돋보기 기능을 구현해보자!

완성본 미리보기!

 

1. CSS 설정!

class="target"인 이미지를 감싸는 class="warp"을 만들고

둘 사이를 position absolute-relative 관계로 설정한다.

<template>
    <div>
        <div class="wrap">
            <img
                class="target"
                src="https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800"
                alt="정말 귀여운 애기 강아지!!"
            />
        </div>
    </div>
</template>

<script setup></script>

<style>
    .wrap {
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);

        width: 500px;
        height: 500px;
        overflow: hidden;

    }
    .target {
        position: relative;
        width: inherit;
        height: inherit;
    }
</style>

 

 

2. 마우스 hover 시 확대 될 class="photo"이미지를 스크립트로 추가한다.

나는 img 내부에 <div class="photo" ref="photo"></>를 추가했다.

여기서 ref는 DOM에 접근하기 위해 추가한 속성이다.

 

DOM에 접근하는 방법은 2가지가 있다.

onMounted 내에서 아래 사용한 것 처럼 getElementByClassName, querySelctor 등등 바닐라 자바스크립트 처럼 접근할 수 있고,

ref로 접근할 수도 있다.

나는 연습하기 위해서 2가지 방식으로 모두 접근해봤다.

 

Vue의 라이프사이클에 따라서 DOM에 접근하기 위해서는 onMounted일 때 접근해야 한다!

onMounted 밖에서 DOM에 접근하려면 에러가 난다.

추가로, getElementByClassName와 같은 바닐라 js로 DOM에 접근하려고 할 땐, nextTick을 사용하면 안전하게 접근 가능하다.

nextTick은 데이터 변경 후 DOM까지 업데이트가 완료된 후 인자로 전달받은 콜백함수를 실행해주는 빌트인 함수다.

 

스크립트를 통해 photo의 style에 접근해 동일한 강아지 이미지를 추가해준다.

이 photo는 target 태그 내부에 있고, 둘은 position absolute-relative 관계이기 때문에 둘은 포개어진다!

<template>
    <div>
        <div class="wrap">
            <img
                class="target"
                ref="target"
                src="https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800"
                alt="정말 귀여운 애기 강아지!!"
            />
            <div class="photo" ref="photo"></div>
            <img />
        </div>
    </div>
</template>

<script setup>
    import { onMounted, ref, nextTick } from 'vue';

    const target = ref(null); // 타임스크립트 사용시 ref<HTMLElement | null>(null);
    const photo = ref(null);

    onMounted(() => {
        nextTick(() => {
            // 1. photo 엘리멘트에 css로 이미지 넣기
            let photoEl = document.getElementsByClassName('photo')[0];
            // console.log('photoEl', photo.value);

            // photo 엘리먼트에 동일한 이미지 추가, target과 photod는  position이 relative-absolute 관계이기 때문에 두 이미지는 겹쳐진다.
            photoEl.style.backgroundImage = `url('https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800')`;
        });
    });
</script>

<style>
    .wrap {
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);

        width: 500px;
        height: 500px;
        overflow: hidden;

    }
    .target {
        position: relative;
        width: inherit;
        height: inherit;
    }

    .photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: transform 0.5s ease-out;

    }
</style>

 

 

3. 마우스 Hover 상태에 따라 이미지 확대 축소 기능 추가하기!

이미지를 감싸는 wrap에 Mouse Hover 이벤트 리스너를 연결한다.

watch로 isHovered 상태를 확인하면서,

ishovered==true이면 이미지 크기를 2배 확대해주고, ishovered==false 이면 이미지 원상태로 되돌린다.

 

여기까지 한다면, 아래처럼 확대 축소되는 이미지를 확인할 수 있다!

<template>
    <div>
        <!-- vue의 v-on은 @로 축약 가능하다. 마우스 hover에 따라 isHovered 값을 변경한다  -->
        <div class="wrap" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
            <img
                class="target"
                ref="target"
                src="https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800"
                alt="정말 귀여운 애기 강아지!!"
            />

            />
            <div class="photo" ref="photo"></div>
            <img />
        </div>
    </div>
</template>

<script setup>
    import { onMounted, ref, nextTick, watch } from 'vue';

    const target = ref(null);
    const photo = ref(null);
    const isHovered = ref(false);

    onMounted(() => {
        nextTick(() => {
            let photoEl = document.getElementsByClassName('photo')[0];

            photoEl.style.backgroundImage = `url('https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800')`;
        });
    });

    // watch를 통해 isHovered 상태를 주시하면서
    // hover 상태라면 photo의 style속성에 transform: scale(2)를 추가해 이미지를 2배 확대한다!
    watch(isHovered, (newVal) => {
        console.log(newVal);

        // 혹시나 photo 엘리멘트를 찾지 못하는 것을 방지하기 위한 코드
        if (photo.value != undefined) {
            if (isHovered.value == true) {
                console.log(photo.value);
                photo.value.style.transform = `scale(2)`;
            } else {
                photo.value.style.transform = `scale(1)`;
            }
        }
    });
</script>

<style>
    .wrap {
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);

        width: 500px;
        height: 500px;
        overflow: hidden;

    }
    .target {
        position: relative;
        width: inherit;
        height: inherit;
    }

    .photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: transform 0.5s ease-out;
    }
</style>

 

끝이 아니지롱 ㅎㅋㅎㅋ

 

 

4. 마우스를 따라다니며 확대시키기(최종 코드)

마우스의 x,y 좌표를 구하는 pageX, pageY를 구하고, target 이미지 요소의 절대 위치를 구해 둘의 차를 구하고,

이 값을 이미지 가로,세로 길이만큼 나눈다음 * 100을 해준다.

 

이 값을 photo의 transform-origin 속성에 대입한다.

photo.value.style.transformOrigin = `${(e.pageX - x) / 500 * 100}% ${((e.pageY - y) / 500) * 100}%`;

 

마우스 좌표에 따라  transform-origin이 변경되는 걸 확인할 수 있다.

이때 왼쪽 위는 (0%,0%), 오른쪽 아래는 (100%,100%)에 근접하는걸 확인할 수 있다!

<template>
    <div>
        <div class="wrap" @mouseenter="isHovered = true" @mouseleave="isHovered = false">
            <img
                class="target"
                ref="target"
                alt="정말 귀여운 애기 강아지!!"
                src="https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800"
                >
                <div class="photo" ref="photo"></div>
          </img >
        </div>
    </div>
</template>

<script setup>
    import { onMounted, ref, nextTick, watch } from 'vue';

    const target = ref(null); // 타임스크립트 사용시 ref<HTMLElement | null>(null);
    const photo = ref(null);
    const isHovered = ref(false); // target에 isHovered 이벤트 리스너를 연결하니까 동작하지 않았다.

    onMounted(() => {
      nextTick(() => {
            // 1. photo 엘리멘트에 css로 이미지 넣기
            let photoEl = document.getElementsByClassName('photo')[0];
            // console.log('photoEl', photo.value);

            // photo 엘리먼트에 동일한 이미지 추가, target과 photod는  position이 relative-absolute 관계이기 때문에 두 이미지는 겹쳐진다.
            photoEl.style.backgroundImage = `url('https://mblogthumb-phinf.pstatic.net/MjAyMTEyMjJfNDcg/MDAxNjQwMTUwOTUzODg2.ywMUl6KPyDdljDTufa1npucGWF5Wyl41Q9NhFyM0Xdog.ntOsJiNdGgz7Hd8VQxk1w7onoPz6ztcDPvsie3hsrzog.JPEG.41minit/1640142789090.jpg?type=w800')`;
        });


    });

    watch(isHovered, (newVal) => {
        if (photo.value != undefined || target.value != undefined) {
            if (isHovered.value == true) {
              photo.value.style.transform = `scale(2)`;

              photo.value.addEventListener('mousemove', function (e) {
                console.log('pageX', e.pageX, 'pageY', e.pageY);

                // 현재 보고있는 화면 기준으로 target 요소의 위치를 알아내기
                let x = target.value.getBoundingClientRect().left;
                let y = target.value.getBoundingClientRect().top;
                console.log('x',x, 'y',y)

                // pageX,Y는 스크롤을 포함한 페이지를 기준으로 좌표를 표시한다.
                // ((pageX - target 이미지의 요소의 맨 왼쪽 좌표) / 이미지의 넓이 * 100)%를 해주면
                // photo 요소 내에서 마우스 좌표를 0% ~ 100%로 계산하고
                // 이를 'transformOrigin' css 속성으로 변경시켜 마우스를 따라다니게 만든다!
                photo.value.style.transformOrigin = `${(e.pageX - x) / 500 * 100}% ${((e.pageY - y) / 500) * 100}%`;
                });
            } else {
                photo.value.style.transform = `scale(1)`;
            }
        }
    });
</script>

<style>
    .wrap {
        position: absolute;
        top: 50%;
        left: 50%; 
        transform: translate(-50%, -50%);

        width: 500px;
        height: 500px;
        overflow: hidden;

    }
    .target {
        position: relative;
        width: inherit;
        height: inherit;
    }

    .photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        transition: transform 0.5s ease-out;
    }
</style>

 

 

 

 

 

참고

https://kutar37.tistory.com/entry/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EB%8F%8B%EB%B3%B4%EA%B8%B0-%EA%B8%B0%EB%8A%A5-%EA%B5%AC%ED%98%84-1

자바스크립트 돋보기 기능 구현 1