[자바스크립트]마우스 따라다니는 박스만들기

HTML 에서 박스를 하나 만들어준다.

<div id="result" style="position: absolute; background: #000; 
width: 30px; height: 30px; opacity: 0.4; border-radius: 100%;">
</div>

JS에서 아래와같이 적어준다.

            function resultFun(x) {
                var positionLeft = x.clientX;
                var positionTop = x.clientY;

                document.getElementById('result').style.left = positionLeft - 10 + "px";
                document.getElementById('result').style.top = positionTop - 10 +"px";
            }
            if (document.addEventListener) {
                document.addEventListener("mousemove", resultFun);
            } else if (document.attachEvent) {
                document.attachEvent("onmousemove", resultFun);
                //attachEvent는 IE8이하와 오페라에서 사용하는 명령어이다
            };

 

동그란놈이 마우스를 따라다니는것을 볼 수 있다.