웹사이트에 대한 사용자 지정 커서 만들기

4470 단어 htmlcssdomjavascript
안녕하세요, 귀하의 웹사이트에 대한 사용자 정의 커서를 만드는 방법에 대해 생각하십니까?
이 섹션에서는 사용자 지정 커서를 빠르고 쉽게 만드는 방법을 보여줍니다. 우리는 간단한 조치를 취해야 합니다(HTML 파일을 만들고 아래 코드 붙여넣기).

    <div class="mouse" id="mouse">
        <img src="https://i.postimg.cc/NFx1b2f7/pack2586.png" alt="">
    </div>

    <style>
        body,
        html {

            width: 100%;
            height: 100%;
            overflow: hidden;
        }

        * {
            cursor: none;

        }

        .mouse {
            width: 20px;
            height: 20px;
            background-color: none;
            position: absolute;
            top: 0;
            left: 0;
            z-index: 1000;
        }

        .mouse img {
            width: 40px;
        }
    </style>

    <script>
        document.onmousemove = function (e) {
            var mouse = document.getElementById("mouse");
            console.log(mouse.style);
            mouse.style.left = e.pageX + 1 + "px";
            mouse.style.top = e.pageY + 1 + "px";
        }
    </script>

좋은 웹페이지 즐겨찾기