JAVASCRIPT STEP 44 - CSS

★ 겹치는 이미지 어떤 태그들이 깔려있는지 볼 수 있는 방법

• 특정 포인트에 겹쳐있는 모든 태그?
• document.elementFromPoint
• document.elementsFromPoint

console.log(document.elementFromPoint(x,y));
console.log(document.elementsFromPoint(x,y));

• 실행 결과

실행 결과

 

 

★ Transform 을 JavaScript에서 작동하기

<script>

    const box = document.getElementById('box');

    box.addEventListener('click', function() {

        box.style.transform = 'rotate(45deg)';

    });

    let n = 0;

    window.onkeydown = function() {

        if (event.keyCode == 38) {
            n+=10;
        } else if (event.keyCode == 40) {
            n-=10;
        }

        box.style.transform = `rotate(${n}deg)`;

    };

</script>

 

★ 상위 메뉴 만들기

• HTML 코드

<nav id="menu">
    <!-- img[src=imges/rect_icon0$.png]*5 -->
    <img src="images/rect_icon01.png" alt="">
    <img src="images/rect_icon02.png" alt="">
    <img src="images/rect_icon03.png" alt="">
    <img src="images/rect_icon04.png" alt="">
    <img src="images/rect_icon05.png" alt="">
</nav>

• CSS 코드

<style>
    #menu {
        /* border : 1px solid black; */
        display: flex;
        width : 630px;

        position: fixed;
        top : -100px;
        left : 0;
        right : 0;
        margin : 0 auto;
    }
    #menu img {
        transition : 1s all;
    }

    /* #menu img:hover {
        transform : translate(0, 90px)
    } */

</style>

• JavaScript

<script>

    const list = document.querySelectorAll('#menu img');

    let old = null;

    for (let i=0; i<list.length; i++) {

        list[i].onclick = function() {

            //이전에 누른 메뉴? > 접기
            if (old !=null){
                old.style.transform = 'translate(0, 0)';
            }

            if (event.target == old) {
                event.target.style.transform = 'translate(0,0)';
                old = null;
            } else {
                //나중에 누른 메뉴
                event.target.style.transform = 'translate(0, 90px)';
                old = event.target;
            }

        };

    }

</script>

• 실행 결과

상위 메뉴 클릭 시 메뉴가 내려옴

 

★ Select 박스를 이용한 이미지 표출

• HTML 코드

<h1>고양이</h1>
<div id="box">
    <div id="list">
        <img src="images/cat01.jpg">
        <img src="images/cat02.jpg">
        <img src="images/cat03.jpg">
        <img src="images/cat04.jpg">
        <img src="images/cat05.jpg">
    </div>
</div>

<hr>

<select id="sel">
    <option value="0">고양이1</option>
    <option value="1">고양이2</option>
    <option value="2">고양이3</option>
    <option value="3">고양이4</option>
    <option value="4">고양이5</option>
</select>

• CSS 코드

<style>
    #box {
        width : 250px;
        height: 188px;
        border : 10px solid dodgerblue;
        overflow: hidden;
    }
    #list {
        /* outline : 10px solid tomato; */
        width : 1250px;
        display: flex;
        transition: 1s all;
    }
    /* #box:hover #list {
        transform: translate(-250px, 0);
    } */
</style>

• JavaScript

<script>
    const sel = document.getElementById('sel');
    const list = document.getElementById('list');

    let old = 0; //이전 고양이 value

    sel.addEventListener('change', function() {
        // alert(Math.abs(event.target.value - old));
        list.style.transitionDuration = `${Math.abs(event.target.value - old)*0.5}s`;
        list.style.transform = `translate(-${event.target.value *250}px, 0)`;

        old = event.target.value;
    });
</script>

• 실행 결과

셀렉트 박스 선택시, 해당 이미지 표출

 

 

★ 배경 이미지를 이용한 응용

• HTML 코드

<h1>배경 이미지</h1>

<div id="heart"></div>
<hr>
<input type="button" value="확인" id="btn">

• CSS 코드

<style>
    #heart {
        border : 1px solid black;
        width : 300px;
        height: 300px;
        background-image: url(images/heart.png);
    }
</style>

• JavaScript

<script>

    let x = 0;

    document.getElementById('btn').onclick = function() {
        x -= 300;
        if (x < - 600) {
            x = 0;
        }
        document.getElementById('heart').style.backgroundPosition = `${x}px 0px`;
    }

</script>

• 실행 결과

버튼 클릭시 하트 체력이 줄어듬

 

★ 퓨마가 움직이는 것처럼 구현

• HTML 코드

<h1>퓨마</h1>

<div id="puma"></div>

• CSS 코드

#puma {
    width : 512px;
    height: 256px;
    background-image: url(images/puma.png);
    background-repeat: no-repeat;
}

• JavaScript

const puma = document.getElementById('puma');
x=0;
let y = 0;

puma.onclick = function() {

    timer = setInterval( () => {

        x -= 512;

        if(x < -(512*3)) {
            x = 0;
            y -= 256;

            if (y<-256) {
                y=0;
            }
        }

        puma.style.backgroundPosition = `${x}px ${y}px`;

    }, 50);            


};

• 실행 결과

퓨마 이미지 클릭시, 이미지가 애니메이션이 되듯이 플레이됨.