카테고리 없음

마우스이벤트

psys 2020. 6. 29. 10:01
728x90

    <style>
        #wrapper{
            width: 50px;
            height: 20px;
            border: 2px solid cyan;
        }
    </style>
</head>
<body>
    <div id="wrapper">
</body>
</html>

onmouseover

마우스올린만큼숫자증가

<body>
    <div id="wrapper" onmouseover="f_over()">

    </div>
    <script>
        function f_over(){
            console.log("마우스가 올라왔어!");
        }
    </script>
</body>

onmouseover

 

 

<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        function f_over(){
            console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            console.log("마우스가 떠났어요!");
        }
    </script>
</body>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper{
            width: 50px;
            height: 20px;
            border: 2px solid cyan;
        }
    </style>
</head>
<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        function f_over(){
            console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            console.log("마우스가 떠났어요!");
        }
    </script>
</body>
</html>

실행 안돼!

왜? 값의 단위;를 넣어보자

        function f_over(){
            v_wrapper.style.width+=10;
        }

이렇게도 안돼

왜? v_wrapper.style.width는 nan이기 때문

v_wrapper.style.width=parseInt(v_wrapper.style.width)+10+"px";

        function f_over(){
            console.log(parseInt(v_wrapper.style.width));
            v_wrapper.style.width=parseInt(v_wrapper.style.width)+10+"px";
            //console.log("마우스가 올라왔어용!");
        }

문자열 빈공백으로 불러와.

        function f_over(){
            console.log("pppp"+ v_wrapper.style.width+"pppp");
        }

따라서 아래와 같이 해준다

    <div id="wrapper" style="width:50px" onmouseover="f_over()" onmouseout="f_out()">

 

또는

빈공백은 false이므로

인라인에 값이 초기화되어있지 않다면 값을 준다(강제 초기화)

        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
           width:50px;
           height:20px;
           border:2px solid cyan; 
        }
    </style>
</head>
<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        var v_wrapper = document.getElementById("wrapper");
        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            
            //console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            console.log("마우스가 떠났어요!");
        }
    </script>
</body>
</html>

마우스올라온상태에서 계속 커지게하기.

setTimeout

        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML="늘어난다앙"
            setTimeout(f_over,300);
        }
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
           width:50px;
           height:20px;
           border:2px solid cyan; 
        }
    </style>
</head>
<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        var v_wrapper = document.getElementById("wrapper");
        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML="늘어난다앙"
            setTimeout(f_over,300);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            console.log("마우스가 떠났어요!");
        }
    </script>
</body>
</html>

 

마우스가 네모를 벗어나면 늘어나는 것을 멈추기

    <script>
        var v_wrapper = document.getElementById("wrapper");
        var v_wWidth = window.innerWidth;
        var v_timeID ;
        function f_over() {
            console.log("pppp" + v_wrapper.style.width + "ppp");// 빈공백임을 확인
            if (!v_wrapper.style.width) {
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            console.log(v_wrapper.style.width);
            console.log(v_wWidth);
            v_wrapper.innerHTML = "늘어난다앙"
            v_timeID = setTimeout(f_over, 30);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out() {
            clearTimeout(v_timeID);
            console.log("마우스가 떠났어요!");
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
           width:50px;
           height:20px;
           border:2px solid black; 
        }
    </style>
</head>
<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        var v_wrapper = document.getElementById("wrapper");
        var v_timerID; // 선언을 함수 밖에서 하면 전역변수
        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML = "늘어난다앙";
            v_timerID=setTimeout(f_over,300);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            // over되었을 때 커지는 것 멈추기
            // clearTimeout 활용!
            clearTimeout(v_timerID);// setTimeout이 발생시킨 타이머 클리어!
            console.log("마우스가 떠났어요!");
        }
    </script>
</body>
</html>

마우스 벗어나면 다시 작아지게

        function f_out(){
            // over되었을 때 커지는 것 멈추기
            // clearTimeout 활용!
            clearTimeout(v_timerID);// setTimeout이 발생시킨 타이머 클리어!
            v_wrapper.style.width = parseInt(v_wrapper.style.width) - 10 + "px";
            v_wrapper.innerHTML = "줄어든다앙";
            setTimeout(f_out,300);
            //console.log("마우스가 떠났어요!");
        }
더보기 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
           width:50px;
           height:20px;
           border:2px solid cyan; 
        }
    </style>
</head>
<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        var v_wrapper = document.getElementById("wrapper");
        var v_timerID; // 선언을 함수 밖에서 하면 전역변수
        function f_over(){
            console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if(!v_wrapper.style.width){
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML = "늘어난다앙";
            v_timerID=setTimeout(f_over,300);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out(){
            // over되었을 때 커지는 것 멈추기
            // clearTimeout 활용!
            clearTimeout(v_timerID);// setTimeout이 발생시킨 타이머 클리어!
            v_wrapper.style.width = parseInt(v_wrapper.style.width) - 10 + "px";
            v_wrapper.innerHTML = "줄어든다앙";
            setTimeout(f_out,300);
            //console.log("마우스가 떠났어요!");
        }
    </script>
</body>
</html>

위에 것은 마우스를 다시 올렸을 때 줄어들지 않아!!

마우스 다시 올렸을 때 다시 늘어나기

    <script>
        var v_wrapper = document.getElementById("wrapper");
        var v_timerID1; // 선언을 함수 밖에서 하면 전역변수
        var v_timerID2;
        function f_over() {
            //  console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if (!v_wrapper.style.width) {
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            clearTimeout(v_timerID2); // 작아지는 타이머 죽이기
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML = "늘어난다앙";
            v_timerID1 = setTimeout(f_over, 300);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out() {
            // over되었을 때 커지는 것 멈추기
            // clearTimeout 활용!
            clearTimeout(v_timerID1);// setTimeout이 발생시킨 타이머 클리어!
            //console.log("pppp"+v_timerID+"ppp");
            v_wrapper.style.width = parseInt(v_wrapper.style.width) - 10 + "px";
            v_wrapper.innerHTML = "줄어든다앙";
            v_timerID2 = setTimeout(f_out, 300);
            //console.log("마우스가 떠났어요!");
        }
    </script>
더보기 
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper {
            width: 50px;
            height: 20px;
            border: 2px solid cyan;
        }
    </style>
</head>

<body>
    <div id="wrapper" onmouseover="f_over()" onmouseout="f_out()">
    </div>
    <script>
        var v_wrapper = document.getElementById("wrapper");
        var v_timerID1; // 선언을 함수 밖에서 하면 전역변수
        var v_timerID2;
        function f_over() {
            //  console.log("pppp"+v_wrapper.style.width+"ppp");// 빈공백임을 확인
            if (!v_wrapper.style.width) {
                v_wrapper.style.width = "50px";  // 강제 초기화
            }
            clearTimeout(v_timerID2); // 작아지는 타이머 죽이기
            v_wrapper.style.width = parseInt(v_wrapper.style.width) + 10 + "px";
            v_wrapper.innerHTML = "늘어난다앙";
            v_timerID1 = setTimeout(f_over, 300);
            //console.log("마우스가 올라왔어용!");
        }
        function f_out() {
            // over되었을 때 커지는 것 멈추기
            // clearTimeout 활용!
            clearTimeout(v_timerID1);// setTimeout이 발생시킨 타이머 클리어!
            //console.log("pppp"+v_timerID+"ppp");
            v_wrapper.style.width = parseInt(v_wrapper.style.width) - 10 + "px";
            v_wrapper.innerHTML = "줄어든다앙";
            v_timerID2 = setTimeout(f_out, 300);
            //console.log("마우스가 떠났어요!");
        }
    </script>
</body>

</html>

'카테고리 없음'의 다른글

  • 현재글마우스이벤트
댓글

티스토리툴바