개발

팝업 이미지카드 예제 본문

Frontend/JavaScript

팝업 이미지카드 예제

Study 2021. 3. 21. 09:22

마우스를 가져다 대면 반투명한 설명카드가 올라오는 이미지 예제입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #wrapper{
            width: 1000px;
            height: 340px;
            background-color: yellow;
            margin: auto;
            overflow: hidden;
        }
    </style>
    <script>
        var wrapper;
        var cardArray=[];
        var a=0.1;
        var targetY=[];
        var src=["3.png","4.png","8.png"];
        var msgArray=["3.png","4.png","다중나선은하가 \n\n블렉홀의 중력에 끌려가는\n모습으로 보이지만 \n 실은 필자도 잘 모른다 "];
 
        function init(){
            wrapper=document.getElementById("wrapper");
            for(var i=0;i<3;i++){
                cardArray[i] = createCard(i, src[i],msgArray[i])
                wrapper.appendChild(cardArray[i]);
            }
 
        }
        function createCard(i, src, msg){
            //카드
            var card=document.createElement("div");
            card.style.width=300+"px";
            card.style.height=320+"px";
            card.style.backgroundImage="url(../images/photo/"+src+")"
            card.style.backgroundSize="cover";
            card.style.position="relative";
            card.style.overflow="hidden";
            card.style.float="left";
            card.style.margin=5+"px";
            card.style.boxSizing="border-box";
 
 
            //텍스트 박스
            var textBox=document.createElement("div");
            textBox.style.width=300+"px";
            textBox.style.height=320+"px";
            //색, 투명도
            textBox.style.backgroundColor="#656563"
            textBox.style.opacity=0.7;
            textBox.style.position="absolute";
            textBox.style.top=270+"px";
            //맨트
            textBox.innerText=msg;
            textBox.style.color="coral";
            textBox.style.fontSize=18+"px";
            textBox.style.textAlign="center";
            textBox.style.boxSizing="border-box";
            textBox.style.paddingTop=15+"px";
            targetY.push(270)
 
            ///마우스 이벤트 구현
            textBox.addEventListener("mouseover", function(){
                //마우스 over시 이동
                targetY[i]=0;
            })
            textBox.addEventListener("mouseout", function(){
                //마우스 out시 이동
                targetY[i]=270;
            })
 
            //조립
            card.appendChild(textBox);
            return card;
        }
 
        //감속도 처리 함수 
        function slideUpDown(){
            for(var i=0;i<cardArray.length;i++){
                var textBox=cardArray[i].children[0];
                textBox.style.top=parseFloat(textBox.style.top)+a*(targetY[i]-parseFloat(textBox.style.top))+"px";
            }
        };
 
        window.addEventListener("load", function(){
            init()
            setInterval("slideUpDown()",10)
        });
    </script>
</head>
<body>
    <div id="wrapper"></div>
</body>
</html>
 cs

'Frontend > JavaScript' 카테고리의 다른 글

Class 객체 예제  (0) 2021.05.01
회원관리 페이지 예제  (0) 2021.03.21
베네치아 타자게임 예제  (2) 2021.03.21
그림판 만들기 예제  (0) 2021.03.20
좌표를 이용한 배열, 맵 연동  (0) 2021.03.20
'Frontend/JavaScript' Related Articles more