웹사이트에 대한 사용자 지정 커서 만들기
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>
Reference
이 문제에 관하여(웹사이트에 대한 사용자 지정 커서 만들기), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/hosseinmobarakian/create-a-custom-cursor-for-your-website-4lpb텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)