Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
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
Tags more
Archives
Today
Total
관리 메뉴

codingfarm

.eq() - 이미지 배열하기 본문

web/JQuery

.eq() - 이미지 배열하기

scarecrow1992 2020. 10. 11. 16:27
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
<!DOCTYPE HTML>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title></title>
 
    <style>
        div.image-container {
            position: relative;
        }
 
        div.image-container img {
            position: absolute;
            left: 0;
            top: 0;
            width: 120px;
        }
        #btnStart {
            padding:5px;
            margin-bottom:5px;
        }
    </style>
 
    <!--
 
    미션 04: 이미지를 가로*세로로 배열하기
    버튼을 클릭하면 이미지를 요구사항에 맞게 배열해 주세요.
 
    요구사항:
        1. 이미지 시작위치는 left:100, top:100 입니다.
        2. 하나의 이미지 영역은 200*200입니다.
        3. 이미지는 3열로 배열해 주세요.
 
    힌트 :
    $대상.css({
        "left":위치값,
        "top":위치값
    })
 
    -->
    <script type="text/javascript"  src="../../../libs/jquery-1.11.0.min.js"></script>
    <script>
        $(document).ready(function() {
            // 버튼 클릭 이벤트 실행.
            $("#btnStart").click(function() {
 
                // 이미지 찾기.
                var $images = $("img");
 
                // 이미지 개수 구하기.
                var length = $images.length;
 
                // 여기에 풀이를 입력해주세요.
                // 이미지 배열하기.
                for (var i = 0; i < length; i++) {
                    // n번째 이미지 구하기
                    var $img = $images.eq(i);
                    // 위치 값 구하기
                    var x = 100 + ((i % 3) * 200);
                    var y = 100 + (parseInt(i / 3) * 200);
 
                    // 위치 설정
                    $images.eq(i).css({
                        left : x,
                        top : y
                    });
                }
            });
        });
 
    </script>
</head>
 
<body>
    <div>
        <button id="btnStart">
            배열시작
        </button>
    </div>
    <div class="image-container">
        <img src="banners/1.png" >
        <img src="banners/2.png" >
        <img src="banners/3.png" >
        <img src="banners/4.png" >
        <img src="banners/5.png" >
        <img src="banners/6.png" >
        <img src="banners/7.png" >
        <img src="banners/8.png" >
    </div>
</body>
</html>
 
 cs

 

저작자표시

'web > JQuery' 카테고리의 다른 글

switch, keydown- 물고기 움직이기  (0) 2020.10.11
addClass, removeClass - 체크박스 만들기  (0) 2020.10.11
<input> 태그의 값 읽기 - 물고기 움직이기  (0) 2020.10.09
사용법  (0) 2020.10.09
소개  (0) 2020.10.09
'web/JQuery' Related Articles more
Comments