VS code - JQuery

최성현·2023년 8월 1일
TRIGGERbackgroung-positionsetIntervalvidibilityz-index강제이벤트
1

JQuery

목록 보기
7/7

z-index

z-index는 큰 값인 요소가 제일 위로 올라옴, 연속 숫자 아니어도 상관없음

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div{
            position: absolute;
            border: 2px solid gray;
            width: 300px;
            height: 300px;
            border-radius: 200px;
        }

        div.pink{
            left: 200px;
            top: 200px;
            background-color: pink;
            z-index: 5; /* z-index의 수가 가장 큰 수가 위로 올라온다 */
        }

        div.purple{
            left: 150px;
            top: 350px;
            background-color: purple;
            z-index: 3;
        }

        div.gray{
            left: 50px;
            top: 200px;
            background-color: gray;
            z-index: 6;
        }
    </style>
    <script>
        $(function(){

            //z-index는 큰 값인 요소가 제일 위로 올라옴, 연속 숫자 아니어도 상관없음
            $("button").click(function(){

                var cls=$(this).attr("class");

                if(cls=='pink')
                {
                    $("div.pink").css("z-index",3);
                    $("div.purple").css("z-index",2);
                    $("div.gray").css("z-index",1);
                }
                else if(cls=='purple')
                {
                    $("div.pink").css("z-index",1);
                    $("div.purple").css("z-index",3);
                    $("div.gray").css("z-index",2);
                }
                else if(cls=='gray')
                {
                    $("div.pink").css("z-index",1);
                    $("div.purple").css("z-index",2);
                    $("div.gray").css("z-index",3);
                }
            });
        });
    </script>
</head>
<body>
    <button type="button" class="pink">핑크를 제일 위로 올리기</button>
    <button type="button" class="purple">퍼플을 제일 위로 올리기</button>
    <button type="button" class="gray">그레이를 제일 위로 올리기</button>

    <div class="pink"></div>
    <div class="purple"></div>
    <div class="gray"></div>
</body>
</html>

강제이벤트/trigger

visibility: hidden;

버튼 생성 후 안보이게 해줌

<!-- visibility: hidden;하면 안보이게 숨겨줌 -->
<input type="file" id="file" style="visibility: hidden;">

이미지 강제 이벤트

cam이미지를 눌렀을때 숨겨진 파일 첨부 버튼을 누른 효과를 주기 위해 사용

<script>
	$("#cam").click(function(){
    // cam이미지를 눌렀을때 숨겨진 파일 첨부 버튼을 누른 효과를 주기 위해 사용
    // 이벤트 강제 발생
   	$("#file").trigger("click");
    });
</script>

trigger

setInterval(function(){}

클릭 이벤트 추가후

$("#img1").click(function(){
	$(this).animate({width:"0px"},'slow',function(){
    	$(this).animate({width:"150px"},"slow");
    });
});

3초에 한번씩 이미지를 클릭한 효과

setInterval(function(){
	$("#img1").trigger("click");
},3000);

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        div.wall{
            position: absolute;
            width: 200px;
            height: 500px;
            background-image: url("../jquery_img/bg2.png");
            z-index: 2;
        }

        #img1{
            position: absolute;
            left: 120px;
            top: 450px;
            width: 150px;
            height: 200px;
            z-index: 1;
        }
    </style>
</head>
<body>
    <h3>카메라 강제 이벤트 발생</h3>
    <!-- visibility: hidden;하면 안보이게 숨겨줌 -->
    <input type="file" id="file" style="visibility: hidden;">
    <!-- 어떤걸 누르면 강제로 이벤트 발생하는 것 -->
    <img src="../jquery_img/camera_img.png" width="70" id="cam">
    
    <script>
        $("#cam").click(function(){
            // cam이미지를 눌렀을때 숨겨진 파일 첨부 버튼을 누른 효과를 주기 위해 사용
            // 이벤트 강제 발생
            $("#file").trigger("click");
        });
    </script>
    <hr>
    <h3>이미지 트리거 발생</h3>
    <div class="wall"></div>
    <img src="../jquery_img/03.png" id="img1">
    <script>
        $("#img1").click(function(){
            $(this).animate({width:"0px"},'slow',function(){
                $(this).animate({width:"150px"},"slow");
            });
        });

        //3초에 한번씩 이미지를 클릭한 효과
        setInterval(function(){
            $("#img1").trigger("click");
        },3000);
    </script>
</body>
</html>

background-position

본문 다 읽어보기(주석 확인 필수)

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        /* gun 이미지 사이즈 300*500 */
        #gun{
            width: 300px;
            /* 2개 이미지 중 위에 총 모양만 나오게 높이는 절반 정도만 준다 */
            height: 250px;
            background-image: url("../jquery_img/gun.png");
        }

        /* 클릭시 총 발사 모양이 보이게 해줌 */
        #gun:active{
            background-position: bottom;
        }


        div.cover{
            position: absolute;
            left: 100px;
            top: 400px;
            background-image: url("../jquery_img/cover.png");
            width: 350px;
            height: 300px;
            /* image 사이즈 전체를 350*300 으로 맞춰서 전체가 나오게 해줌
                위에 width height값과 동일해야함 */
            background-size: 350px 300px;
            z-index: 2;
        }

        div.cd1{
            position: absolute;
            left: 250px;
            top: 410px;
            background-image: url("../jquery_img/cd-sprite.png");
            width: 330px;
            height: 290px;
            /* cd 3개 중 맨 위에 1개만 나오게 하기 위해 height 값의 3배를 줘서 맨 위 1개만 나오게 해줌 */
            background-size: 350px 870px;
            z-index: 1;
        }

        div.buttons{
            position: absolute;
            left: 180px;
            top: 750px;
        }

        div.buttons button{
            width: 100px;
            height: 100px;
            border-radius: 100px;
            margin-right: 20px;
            background-color: skyblue;
            color: white;
            font-size: 2em;
            cursor: pointer;
        }

        div.button button.hover{
            box-shadow: 5px 5px 5px gray;
        }
    </style>
    <script>
        $(function(){

        /* background-position
        ..속성값
        left top 왼쪽 상단
        left center 왼쪽 중앙
        left bottom 왼쪽 맨아래
        right top 오른쪽 상단
        right center 오른쪽 중앙
        right bottom 오른쪽 맨아래
        center top 가운데 상단
        center center 정 가운데
        center bottom 가운데 맨아래
        두가지 중 한가지만 쓰면 나머지는 자동으로 center가 됩니다.
        X% y% x는 가로 위치, y는 세로 위치입니다.
        0% 0% 는 left top 과 같으며 , 100% 100% right bottom과 같음.
        한 가지만 지정하면 나머지는 50%
        cm, px, in, pt, px, em등의 단위와 섞어서 지정도 가능 */

            $("#btn1").click(function(){

                var pos=$("div.cd1").css("background-position"); //자른 cd 3개 이미지 어떤 cd로 갈지
                console.log(pos);

                //똑같은 위치면 alert해서 경고문 뜨게 if조건문

                if(pos=='0% 0%'){ //div 기준: 1번째 div 0%시작 마지막 div 100%끝/div 갯수에 맞춰서 % 배정
                                  //if(pos=='left top') 그냥 top도 있지만 기본 속성값이 
                                  //left top이라 left에 0%로 줘서 값을 안주고 top만 줌
                    
                    alert("현재 1번 CD입니다");
                }
                else
                {
                    //$("div.cd1").css("background-position","left center");

                    //애니메이션으로 적용
                    $("div.cd1").animate({left:"120px"},500,function(){
                        $(this).css("background-position","left top");
                        //left에 280px공간 줘서 cd가 나오는 효과
                        $(this).animate({left:"280px"},500);
                    });
                }
            });

            $("#btn2").click(function(){

                var pos=$("div.cd1").css("background-position"); //자른 cd 3개 이미지 어떤 cd로 갈지
                console.log(pos);
                if(pos=='0% 50%'){ 
                    
                    alert("현재 2번 CD입니다");
                }
                else
                {
                    //$("div.cd1").css("background-position","left center");

                    //애니메이션으로 적용
                    $("div.cd1").animate({left:"120px"},500,function(){
                        $(this).css("background-position","left center");
                        $(this).animate({left:"280px"},500);
                    });
                }
            });

            $("#btn3").click(function(){

            var pos=$("div.cd1").css("background-position"); //자른 cd 3개 이미지 어떤 cd로 갈지
            console.log(pos);
            if(pos=='0% 100%'){ //left top
    
                alert("현재 2번 CD입니다");
            }
            else
            {
                //$("div.cd1").css("background-position","left center");

                //애니메이션으로 적용
            $("div.cd1").animate({left:"120px"},500,function(){
                $(this).css("background-position","left bottom");
                $(this).animate({left:"280px"},500);
            });
}
});
        });
    </script>
</head>
<body>
    <h2>전체 이미지 중에서 일부</h2>
    <div id="gun"></div>

    <hr>
    <div class="cover"></div>
    <div class="cd1"></div>
    <div class="buttons">
        <button type="button" id="btn1">CD1</button>
        <button type="button" id="btn2">CD2</button>
        <button type="button" id="btn3">CD3</button>
    </div>
</body>
</html>

사진 누르면 벽지 바뀌고 벽지 이름 바뀌게 하기(퀴즈)

본문

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Cute+Font&family=Diphylleia&family=Dokdo&family=Nanum+Brush+Script&family=Nanum+Gothic+Coding&family=Noto+Sans+KR&display=swap" rel="stylesheet">
    <script src="https://code.jquery.com/jquery-3.7.0.js"></script>
    <title>Document</title>
    <style>
        li{
            list-style: none;
        }

        body{
            background-color: #fff;
        }

        div.wall{
            width: 800px;
            height: 600px;
            background-color: #999;
            background-image: url("");
            margin: 50px auto;
        }

        h1.title{
            font-size: 30px;
            position: absolute;
            right: 315px;
            top: 180px;
            width: 150px;
            font-family: 'Cute Font';
        }

        div.wall ul.list li{
            width: 70px;
            height: 70px;
            float: left;
            cursor: pointer;
            margin-top: 10px;
            margin-left: 10px;
        }

        div.wall ul.list li img{
            width: 100%;
        }

        /* 제이커리에서 사용할 클래스 */
        div.wall ul.list li.active{
            border-color: tomato;
            border: 5px solid tomato;
            box-shadow: 5px 5px 5px lightcoral;
        }
    </style>
    <script>
        $(function(){        
        //현재클릭한 이미지의 부모인 li에 클래스추가하기
        //부모태그의 형제태그에 들어있는 active클래스 제거
        //클릭한 곳의 title속성얻기
        //얻은 title속성을 h1에 넣기
        //클릭한 이미지 속성 얻어서 벽지에 넣기

            $("ul.list img").click(function(){
                $(this).parent().addClass("active");
                $(this).parent().siblings().removeClass();

                var title=$(this).attr("title");
                $("h1").html(title);

                var img2=$(this).attr("src");
                $("div.wall").css("background-image","url('"+img2+"')");
            });
        });
    </script>
</head>
<body>
    <div class="wall">
        <h1 class="title">Select Page</h1>
        <img src="../jquery_img/cover2.png">
        <ul class="list">
            <li><img src="../jquery_img/b01.png" title="Pear"></li>
            <li><img src="../jquery_img/b02.png" title="Checker"></li>
            <li><img src="../jquery_img/b03.png" title="Bamboo"></li>
            <li><img src="../jquery_img/b04.png" title="Pencil"></li>
            <li><img src="../jquery_img/b05.png" title="Leaf"></li>
            <li><img src="../jquery_img/b06.png" title="Forest"></li>
        </ul>
    </div>
</body>
</html>
profile
최성현
백엔드 개발자로서 성장해 나가는 성현이의 블로그~
이전 포스트

VS code-JQuery

0개의 댓글