loop

배열의 데이터를 꺼낼 때 for, for of, foreach 예제

1차원 배열

for문


let arr = ["가","나","다","라"];

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

    console.log(arr[i]);

}

for of문


let arr = ["가","나","다","라"];

for(let el of arr){

    console.log(el);

}

forEach 메서드


let arr = ["가","나","다","라"];

arr.forEach(function(el, idx){

    console.log("arr[" + idx "] = " + el);

})

결과

가
나
다
라

2차원 배열

for문


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


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

    console.log("기관명 : " + arr[i][0]);
    console.log("누리집 : " + arr[i][1]);

}

for of문


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


for(let el of arr){

    console.log("기관명 : " + arr[0]);
    console.log("누리집 : " + arr[1]);

}

forEach 메서드


let arr = [

    ["서울시청","https://www.seoul.go.kr/"],
    ["경기도청","https://www.gg.go.kr/"],
    ["제주도청","https://www.jeju.go.kr/"],
    ["강원도청","https://state.gwd.go.kr/"]

];


arr.forEach(function(el, idx){

    console.log("기관명 : " + el[0]);
    console.log("누리집 : " + el[1]);

})

출력결과

기관명 : 서울시청
누리집 : https://www.seoul.go.kr/
기관명 : 경기도청
누리집 : https://www.gg.go.kr/
기관명 : 제주도청
누리집 : https://www.jeju.go.kr/
기관명 : 강원도청
누리집 : https://state.gwd.go.kr/

객체 배열 (Object Array)

for문


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


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

console.log("기관명 : " + arr[i].orgname);
console.log("누리집 : " + arr[i].url);
console.log("위도 : " + arr[i].latitude);
console.log("경도 : " + arr[i].longitude);


}

for of문


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


for(let el of arr){

console.log("기관명 : " + el.orgname);
console.log("누리집 : " + el.url);
console.log("위도 : " + el.latitude);
console.log("경도 : " + el.longitude);

}

forEach 메서드


let arr = [

    {
    orgname:"서울시청", 
    url:"https://www.seoul.go.kr/", 
    latitude:"37.56677014701592", 
    longitude:"126.97867491234639"
    },

    {
    orgname:"경기도청", 
    url:"https://www.gg.go.kr/", 
    latitude:"37.28893135508412", 
    longitude:"127.05347693534611"
    },

    {
    orgname:"제주도청", 
    url:"https://www.jeju.go.kr/", 
    latitude:"33.48889985012181", 
    longitude:"126.49822386525447"},

    {
    orgname:"강원도청", 
    url:"https://state.gwd.go.kr/", 
    latitude:"37.88530735666828", 
    longitude:"127.72982257639035"
    }

];


arr.forEach(function(el, idx){

console.log("기관명 : " + el.orgname);
console.log("누리집 : " + el.url);
console.log("위도 : " + el.latitude);
console.log("경도 : " + el.longitude);

});

출력결과

기관명 : 서울시청
누리집 : https://www.seoul.go.kr/
위도 : 37.56677014701592
경도 : 126.97867491234639
기관명 : 경기도청
누리집 : https://www.gg.go.kr/
위도 : 37.28893135508412
경도 : 127.05347693534611
기관명 : 제주도청
누리집 : https://www.jeju.go.kr/
위도 : 33.48889985012181
경도 : 126.49822386525447
기관명 : 강원도청
누리집 : https://state.gwd.go.kr/
위도 : 37.88530735666828
경도 : 127.72982257639035

성능 차이

  1. for 문
    반복 조건을 미리 정하여 인덱스로 배열에 접근하기 때문에 빠르다.

  2. for of 문
    ES6에 도입된 반복문으로 배열또는 iterable 객체에서 순차적으로 요소를 가져오는 방식이다.
    for문보다 약간 느리지만 가독성이 좋다.

  3. forEach 메서드
    forEach는 배열의 각 요소에 대한 콜백함수를 실행하는 메소드.
    콜백 함수 호출로 인한 오버헤드 때문에 for, for of 보다 성능이 떨어질 수 있다고 한다.

반응형
저작자표시 비영리 변경금지 (새창열림)

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] Form Validator 폼 유효성 검사 함수  (6) 2024.11.16
[JAVASCRIPT] 브라우저 zoom in / zoom out 기능  (1) 2020.10.21
[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10

 

 

 


<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>


<form action="/submit.do" method="post" onsubmit="myValidator(); return false;" class="use_validator">

<fieldset> 
<legend>폼 양식</legend>


<ul>
    <li>input text only string</li>
    <li><input type="text" name="user_name" title="이름" class="use_vali only_string" placeholder="이름"></li>
</ul>

<ul>
    <li>input text only number</li>
    <li><input type="text" name="user_tel" title="연락처" class="use_vali only_number" maxlength="11" placeholder="연락처"></li>
</ul>

<ul>
    <li>input checkbox</li>
    <li>

        <input type="checkbox" name="ott[]" title="ott" value="넷플릭스" class="use_vali">
        <label for="">넷플릭스</label>

        <input type="checkbox" name="ott[]" title="ott" value="쿠팡플레이" class="use_vali">
        <label for="">쿠팡플레이</label>

        <input type="checkbox" name="ott[]" title="ott" value="왓챠" class="use_vali">
        <label for="">왓챠</label>

        <input type="checkbox" name="ott[]" title="ott" value="디즈니플러스" class="use_vali">
        <label for="">디즈니플러스</label>

        <input type="checkbox" name="ott[]" title="ott" value="티빙" class="use_vali">
        <label for="">티빙</label>

    </li>
</ul>


<ul>
    <li>input radio</li>
    <li>

        <input type="radio" name="gender" value="M" title="성별" class="use_vali">남
        <input type="radio" name="gender" value="F" title="성별" class="use_vali">여

    </li>
</ul>

<ul>
    <li>input password</li>
    <li>
        <input type="password" name="passwd" title="비밀번호" class="use_vali">
    </li>
</ul>


<ul>
    <li>textarea</li>
    <li><textarea name="remarks"  title="비고" class="use_vali"></textarea></li>
</ul>

<ul>
    <li>select</li>
    <li>
        <select name="site_list" title="사이트" class="use_vali">
            <option value="">:: 선택 ::</option>
            <option value="네이버">네이버</option>
            <option value="구글">구글</option>
            <option value="다음">다음</option>
        </select>
    </li>
</ul>


<ul>
    <li>취미</li>
    <li>

        <input type="checkbox" name="hobby[]" class="use_vali" title="취미" id="hobby1">
        <label for="hobby1"><span class="custom_inp"></span>독서</label>

        <input type="checkbox" name="hobby[]" class="use_vali" title="취미" id="hobby2">
        <label for="hobby2"><span class="custom_inp"></span>여행</label>

        <input type="checkbox" name="hobby[]" class="use_vali has_etc" title="취미" id="hobby3">
        <label for="hobby3"><span class="custom_inp"></span>기타</label>


        <input type="text" name="hobby_etc" class="use_vali" title="취미 기타" disabled>



    </li>
</ul>

</fieldset>

<input type="submit" value="확인">


</form>    




<script>


// form과 유효성 검사를 할 요소 
let frm = document.querySelector("form.use_validator");
let el = document.querySelectorAll(".use_vali");
let onlyStrEl = document.querySelectorAll(".only_string");
let onlyNumEl = document.querySelectorAll(".only_number");


// input, select, textarea 유효성검사 
function myValidator(){

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

        if(el[i].disabled) continue;

        let tagName = el[i].tagName;
        let type = el[i].getAttribute("type");
        let title = el[i].getAttribute("title");
        let name = el[i].getAttribute("name");
        let chkEl = document.getElementsByName(name);

        if(tagName == "INPUT"){

            if(type == "text" || type == "password") {

                if(el[i].value == ""){

                    alert(`${title}을(를) 입력해주세요`);
                    el[i].focus();
                    return false;

                }

            } else if(type == "checkbox" || type == "radio") {

                let count = 0;

                for(let j=0;j<chkEl.length;j++){

                    if(chkEl[j].checked) count++;

                }

                if(count < 1){

                    alert(`${title}을(를) 선택해주세요.`);
                    el[i].focus();
                    return false;

                }

            }

        } else if(tagName == "TEXTAREA"){

            if(el[i].value == ""){

                el[i].focus();
                alert(`${title}을(를) 선택해주세요.`);
                return false;

            }

        } else if(tagName == "SELECT"){

            let slctVal = el[i].options[el[i].selectedIndex].value;

            if(slctVal == ""){

                el[i].focus();
                alert(`${title}을(를) 선택해주세요.`);
                return false;

            }

        } 

    }

    return true;

}


// 유효성 검사를 사용하는 .use_vali에 대한 클릭 이벤트 
el.forEach(element => { element.addEventListener("click", isEtc); });

// 문자
onlyStrEl.forEach(element => { element.addEventListener("keyup", () => myValidator_onlyString(element)); });

// 숫자
onlyNumEl.forEach(element => { element.addEventListener("keyup", () => myValidator_onlyNumber(element)); });


// 클릭 이벤트 발생시 추가 인풋에 대한 disabled 처리 
function isEtc(){

    if(!this.classList.contains("has_etc")) return false;

    let name = this.getAttribute("name").replace("[]","");
    let etcEl = document.querySelector(`[name="${name}_etc"]`);

    if (this.checked) {

        etcEl.removeAttribute("disabled");
        etcEl.focus();

    } else {

        etcEl.setAttribute("disabled", true);
        etcEl.value = "";

    }

}


// 한영 제외 제거 함수
function myValidator_onlyString(el){

    el.value = el.value.replace(/[^ㄱ-ㅎ가-힣a-zA-Z]/g,'');

}

// 숫자 제외 제거 함수
function myValidator_onlyNumber(el){

    el.value = el.value.replace(/[^0-9]/g,'');

}



</script>


</body>
</html>
반응형
저작자표시 비영리 변경금지 (새창열림)

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] loop(반복문) - for문, for of문, forEach메서드  (0) 2024.11.18
[JAVASCRIPT] 브라우저 zoom in / zoom out 기능  (1) 2020.10.21
[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
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
 
<style>
    a {text-decoration:none;color:#333;}
    ul {list-style:none;}
    ul.zoom_btn li {display:inline-block;border:1px solid #ccc;text-align:center;}
    ul.zoom_btn li a {display:block;width:40px;height:40px;line-height:40px;}
 
</style>
 
<header>
    <ul class="zoom_btn">
        <li><a href="javascript:;" id="zoomOut">-</a></li>
        <li><a href="javascript:;" id="zoomInit">기본</a></li>
        <li><a href="javascript:;" id="zoomIn">+</a></li>
    </ul>
</header>
<!--//header-->
 
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis delectus, libero porro. Voluptate autem mollitia delectus. Voluptate consectetur, provident nam, facilis ea mollitia rerum animi pariatur illo suscipit, eos autem!</p>
 
<script type="text/javascript"> 
 
var zoomsVal = 100;
var zoomsInterval = 10;
var zoomsInit = document.getElementById("zoomInit");
var zoomsIn = document.getElementById("zoomIn");
var zoomsOut = document.getElementById("zoomOut");
    
zoomsInit.addEventListener("click", zoomInit);
zoomsIn.addEventListener("click", zoomIn);
zoomsOut.addEventListener("click", zoomOut);
 
    function zoomInit(){ 
 
        zoomsVal = 100;
        zoomCalc();
        //console.log("zoom init");
 
    }
 
    function zoomCalc(){
 
        document.body.style.zoom = zoomsVal + '%';
 
    }
 
    function zoomIn() { 
 
        zoomsVal += zoomsInterval;
        zoomCalc();
        //console.log("zoom In");
 
    }
 
    function zoomOut() { 
 
        zoomsVal -= zoomsInterval;
        zoomCalc();
        //console.log("zoom out");
 
    }    
 
</script> 
cs
반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] loop(반복문) - for문, for of문, forEach메서드  (0) 2024.11.18
[JAVASCRIPT] Form Validator 폼 유효성 검사 함수  (6) 2024.11.16
[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
1
2
3
4
5
6
7
8
9
<select name="" id="scltList" title="포털 리스트">
 
<option value="x" selected="selected" id="slct">--선택--</option>
<option value="http://www.naver.com">네이버</option>
<option value="http://www.google.co.kr/">구글</option>
<option value="http://www.daum.net/">다음</option>
 
</select>
        
 cs
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
 
/* select tab function */
var selectTab = document.getElementById("scltList"); // 셀렉트를 변수에 저장
    
selectTab.addEventListener("change",function(){ // change 이벤트 발생
 
    var val = selectTab.options[selectTab.selectedIndex].value; // option value값 저장
 
    if(val != "x" ){ // value값이 x가 아닐 때 
 
    window.open(val); // 새 창으로 홈페이지 띄움
        
    document.getElementById("slct").selected = true; // 선택한 옵션을 제일 처음으로 바꿔줌.    
 
    }    
    
});
    
</script>
 cs

 

셀렉트를 이용하여 홈페이지를 이동시키는 기능입니다.

1. 셀렉트 내 옵션을 선택 할 때 value값이 x가 아니면 

    window.open을 이용하여 새 창으로 url로 이동

2. 이동 후 제일 첫번째 옵션으로 재선택됨

반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] Form Validator 폼 유효성 검사 함수  (6) 2024.11.16
[JAVASCRIPT] 브라우저 zoom in / zoom out 기능  (1) 2020.10.21
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
mega menu, full wide dropdown menu  (0) 2019.03.11

모바일 화면일 때 셀렉트로 컨트롤 가능한 탭기능을 자바스크립트로 만들어 보았다..

 

<CSS>

1
2
3
4
5
6
<style>
    
.con_cmn {display:none}
.con1 {display:block;}
    
</style>
cs

 

<HTML>

1
2
3
4
5
6
7
8
9
10
11
<select name="" id="selectTab" class="select_tab" title="교육과정 선택 구분">
<option value="x">-- 선택 --</option>
<option value="0" id="tab1">야구</option>
<option value="1">축구</option>
<option value="2">농구</option>
</select>
<!--//select_tab-->
 
<div class="con_cmn con1">야구 콘텐츠</div>
<div class="con_cmn con2">축구 콘텐츠</div>
<div class="con_cmn con3">농구 콘텐츠</div>
 cs

 

<JAVASCRIPT>

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
<script type="text/javascript">
 
/* select tab function */
    
var selectTab = document.getElementById("selectTab"); // select 저장
    
var con = document.getElementsByClassName("con_cmn"); // select 에 대응하는 콘텐츠 요소들 저장
    
selectTab.addEventListener("change",function(){ // selecㅅ가 변화할 때 
    
    var val = selectTab.options[selectTab.selectedIndex].value; // option value값
    
    for (var i = 0;i<selectTab.length-1; i++){ // select가 4개, 콘텐츠가 3개이기때문에 length-1 
        
    con[i].style.display = "none" ;    // 콘텐츠 모두 숨김
        
        if(val == i ) { // select에 해당하는 콘텐츠가 보여짐
            
            con[i].style.display = "block" ;
            
        } else if (val == "x" ){ // value값이 x인 첫번째 option을 선택 했을 때
            
            con[0].style.display = "block" ; // 1번째 콘텐츠 보여주고
            
            document.getElementById("tab1").selected = true; // select는 첫번째를 선택
            
        }
    }
});    
</script>
 cs
반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[JAVASCRIPT] 브라우저 zoom in / zoom out 기능  (1) 2020.10.21
[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
mega menu, full wide dropdown menu  (0) 2019.03.11
fade slide  (0) 2018.07.13

$(function(){
  
var tab1 = $("#latest ul.latest_tab li");
var tab2 = $("#notice ul.notice_tab li");

    
function tabFunction(el, elThis, idx){
el.removeClass("on");
elThis.addClass("on");
$(".tab_con").removeClass('on');   
$('.tab' + idx).addClass('on');    
}


tab1.click(function(){
var el = tab1;
var elThis =$(this);
var idx = $(this).index()+1;
tabFunction(el, elThis,idx);

});

tab2.click(function(){
var el = tab2;
var elThis =$(this);
var idx = $(this).index()+1;
tabFunction(el, elThis, idx);
});
           
        
});

반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
mega menu, full wide dropdown menu  (0) 2019.03.11
fade slide  (0) 2018.07.13
슬라이드 setInterval, clearInterval  (0) 2018.07.04

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

     <style>

    header nav {position: relative;}

    header nav .lnb {width:100%;margin:0 auto;text-align: center;position:relative;z-index: 9999l}

    header nav .lnb ul.depth1 {width:100%;max-width:1200px;margin:0 auto;;border:1px solid #cecece;}

    header nav .lnb ul li {display:inline-block;text-align: center;width:19%;vertical-align: top;}

    header nav .lnb ul li a {display:block;font-size:18px;font-weight:bold;color:#202020;padding:15px 0;}

        

    header nav .sub_menu {background-image: linear-gradient(to right, #ffd354 40%, #fff 60%);;width:100%;border-bottom:1px solid #ff4f02;position:absolute;z-index:1;left:0;display:none;} 

    header nav .sub_menu .inner_wrap {width:100%;max-width:1200px;margin:0 auto;font-size:0;} 

    header nav .sub_menu .sub_menu_tit {display:inline-block;width:100%;max-width:360px;} 

        

    header nav .sub_menu h2.tit {font-size:29px;color:#000;padding:60px 0 25px 0px;margin:0 0 0 10px;border-bottom:1px solid #ff4f02;display: inline-block;}

    header nav .sub_menu p.exp {font-size:15px;color:#505050;padding:25px 0 47px 10px ;background:url(src/img/main/nav_bg.png) 250px top no-repeat;letter-spacing:-1px;}

    

    header nav .depth2 {display: inline-block;background:#fff;vertical-align: top;padding:25px 0 25px 25px;width:100%;max-width:800px;min-height:212px;}

    header nav .depth2 li {width:260px;display: inline-block;}

    header nav .depth2 li a {display:block;color:#ff4f02;padding:15px;font-size:15px;font-weight: bold;background:url(src/img/main/sub_arrow.png) 95% 20px no-repeat #f4f4f4;margin:0 15px 10px 0;}

        

        @media (max-width:1200px){

            header nav .sub_menu .sub_menu_tit {margin:0 0 0 25px;}

            header nav .sub_menu {background:#ffd354;}    

            header nav .depth2 {max-width:calc(100% - 50px);padding:25px;}

            header nav .depth2 li {width: 24.5%;display: inline-block;}

        }    

    

    </style>

    

    <script>

        $(function(){

        var depth1_list = $(".lnb .depth1 li");

        var overArea = $(".sub_menu");

            

        depth1_list.mouseover(function(){

        var idx = depth1_list.index(this)+1;

        //console.log(idx + "클릭");

            $(".sub_menu").hide();

            $(".sub_"+idx).slideDown();

            //console.log(idx+"서브출력");

           });

            

          overArea.mouseleave(function(){

            $(".sub_menu").slideUp();

           });

        });

    

    

    

    </script>

  

   <div id="wrap">

      <header>

          <nav>

         <div class="lnb">

               <ul class="depth1">

                  <li><a href="#">메뉴1</a></li>

                  <li><a href="#">메뉴2</a></li>

                  <li><a href="#">메뉴3</a></li>

                  <li><a href="#">메뉴4</a></li>

                  <li><a href="#">메뉴5</a></li>

              </ul>

              <!--//depth2-->

          </div>

          <!--//lnb-->

          

          <div class="sub_menu sub_1">

            <div class="inner_wrap">

                       <div class="sub_menu_tit">

                        <h2 class="tit">메뉴1</h2>

                        <p class="exp">txt</p>

                     </div>

                     <!--//sub_menu_tit-->

                      <ul class="depth2">

                          <li><a href="#">서브1</a></li>

                          <li><a href="#">서브2</a></li>

                          <li><a href="#">서브3</a></li>

                          <li><a href="#">서브4</a></li>

                          <li><a href="#">서브5</a></li>

                          <li><a href="#">서브6</a></li>

                          <li><a href="#">서브7</a></li>

                      </ul>

                      <!--//depth2-->

                      

                      </div>

                      <!--//inner_wrap-->

          </div>

          <!--//sub_menu-->

          

         <div class="sub_menu sub_2">

            <div class="inner_wrap">

                       <div class="sub_menu_tit">

                        <h2 class="tit">메뉴2</h2>

                        <p class="exp">홈페이지~</p>

                     </div>

                     <!--//sub_menu_tit-->

                      <ul class="depth2">

                          <li><a href="#">서브1</a></li>

                          <li><a href="#">서브2</a></li>

                          <li><a href="#">서브3</a></li>

                          <li><a href="#">서브4</a></li>

                          <li><a href="#">서브5</a></li>

                          <li><a href="#">서브6</a></li>

                          <li><a href="#">서브7</a></li>

                      </ul>

                      <!--//depth2-->

                      

                      </div>

                      <!--//inner_wrap-->

          </div>

          <!--//sub_menu-->

          

          

          

          </nav>

          <!--//nav-->

      </header>

      <!--//header-->

      

    </div>

    <!--//wrap-->

</body>

</html>   


1. 1뎁스 메뉴 인덱스 체크 후 서브메뉴 출력 방식


반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
fade slide  (0) 2018.07.13
슬라이드 setInterval, clearInterval  (0) 2018.07.04

<!DOCTYPE html>

<html lang="ko">

<head>

    <meta charset="UTF-8">

    <title>fade slide example</title>

    <script src="http://code.jquery.com/jquery-latest.min.js"></script>

    <style>

        .fadeSlide {position: relative; height:300px;} /* 슬라이드 부모요소 */

        .fadeSlide .active {z-index: 1;} /* */ 

        #img1 {background:#ddd;width:1000px;height:300px;position: absolute;}

        #img2 {background:#555;width:1000px;height:300px;position: absolute;}

        #img3 {background:#333;width:1000px;height:300px;position: absolute;}

    </style>

    <script>

        var currentImg; // 현재 이미지

        var nextImg; // 다음 이미지

        var timer=setInterval("fadeSlide()",3000); // 타이머 : fadeSlide함수를 3초마다 실행        

    function fadeSlide(){

        currentImg = $(".fadeSlide div:eq(0)"); // 1번째 div

        nextImg = $(".fadeSlide div:eq(1)"); // 2번째 div 

        nextImg.addClass("active").css("opacity",0).animate({opacity:1},1000,

        /* 1. 2번째 div에 클래스 active추가하여 z-index가 1이되어 제일 상단으로 올라온다

           2. 올라온 후 보이지 않게 opacity는 0으로 설정 후 opacity 1로 1초간 자연스럽게 animate된다. */                                                            

        function(){

            $(".fadeSlide").append(currentImg); //3. 2번째 이미지가 1번째 div로 설정되고

            currentImg.removeClass("active"); // 4. 1번째 div에 클래스를 지워서 zindex가 사라지게 한다.

        });      

    }     

                  

        $(function(){                  

               $('.fadeSlide').hover(   

            function(){ //mouseenter일 때

           clearInterval(timer); // 변수 timer에 저장된 페이드함수를 지운다.

               

            console.log("clear");


        }, 

            function(){   //mouseleave일 때

          timer=setInterval("fadeSlide()",3000);// 변수 timer에 함수 다시 담아준다

            console.log("set!");

        });              

            

        });

        

       

    </script>

</head>

<body>    

<div id="wrap">

    <div class="fadeSlide">

    <div id="img1" class="active">이미지1</div>

    <div id="img2">이미지2</div>

    <div id="img3">이미지3</div>    

    </div><!--//fadeSlide-->

</div><!--//warp-->     

</body>

</html>

반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
mega menu, full wide dropdown menu  (0) 2019.03.11
슬라이드 setInterval, clearInterval  (0) 2018.07.04

<script>

var auto=setInterval(nextBtn,2000); // 우측으로 이동하는 함수 setInterval 2초

        

        $(".slide").hover(   // mouseenter + mouseleave

            function(){ //mouseenter일 때

           clearInterval(auto); // 변수 auto에 저장된 자동슬라이드 setInterval을 지운다.

        }, 

            function(){   //mouseleave일 때

          auto=setInterval(nextBtn,2000);// 변수 auto에 자동슬라이드 setInterval을 다시 저장준다(var auto 아님)

        }

        );

<script>



hover : 자동 슬라이드 멈춤

mouseleave : nextBtn 함수 재실행


반응형

'JAVASCRIPT&JQUERY' 카테고리의 다른 글

[javascript] select option 홈페이지 이동기능  (0) 2020.02.01
[javascript] select로 탭메뉴 만들기  (0) 2020.01.29
탭기능구현 (addClass / removeClass)  (0) 2019.07.10
mega menu, full wide dropdown menu  (0) 2019.03.11
fade slide  (0) 2018.07.13

+ Recent posts

티스토리툴바