본문 바로가기
반응형

All122

[script] gnb menu slide toggle2 gnb 영역에 마우스 hover 했을때 아래 sub_gnb 리스트 + 하얀색 배경이 같이 내려와야한다. 오른쪽 메뉴버튼 클릭했을때 마찬가지로 서브메뉴와 뒷배경이 같이 보여져야 함. 스크립트도 hover 했을 때와 click 했을 때 두가지로 써야함. 추가되는 class는 on으로 통일해서 css 한번만 써도 될수 있게 했다. $(document).ready(function(){ $(".gnb").hover(function(){ $("#header").toggleClass('on'); $(".gnb_bar").stop().slideToggle(); $(".bg").stop().slideToggle(); }); $('.gnb_btn').click(function(){ $('#header').toggleCla.. 2020. 5. 12.
[script] slick 슬라이드 visual 영역(arrow, dots) slick 슬라이드를 이용한 visual 영역 이미지 scale 축소되는 애니메이션효과. slick 슬라이드 next prev 버튼 - 옵션 arrows page 버튼 - 옵션 dots slick script 효과는 코드펜에서 찾아서 적용해봤습니다! $(document).ready(function(){ var $slick_carousel = $(".slide_wrap"); $slick_carousel.on('init', function(event, slick) { $(".slide_li").eq(0).addClass("active"); }); $slick_carousel.on('afterChange', function(event, slick, currentSlide){ $(".slide_li").remo.. 2020. 5. 9.
[script] 리스트 영역 클릭했을 때 넓어지는 효과 해당 영역 클릭 했을 때 영역 배경이 밝아지면서 width값 넓어지고, 하단 border, sub_txt 가 보여지는 효과. $(document).ready(function(){ $('.s1_slide > li').click(function(){ $(this).addClass('on'); $('.s1_slide > li').not(this).removeClass('on'); }); }); carina 티스토리 블로그 carina 클릭했을때 아래 아래 화살표 사라짐~~ carina border 왼 -> 오~~ carina 클릭했을때 가로 넓어지면서 배경색 opacity 조절해서 밝아짐~~ .s1_slide{width:100%; height:410px; box-sizing:border-box; } .s1_s.. 2020. 5. 7.
[gnb] gnb menu 스크립트 사용없이 마우스 오버 효과만으로 작동하는 sub_gnb menu 배경 효과. 메뉴에 마우스 올렸을 때 header부분 배경, gnb 글씨 색 변경 및 하단 sub_menu width:100% 배경이 생기고 상단 메뉴를 기준으로 하위메뉴가 정렬됨. GNB 메뉴1 서브메뉴1 서브메뉴2 메뉴2 서브메뉴3 서브메뉴4 서브메뉴5 메뉴3 서브메뉴6 서브메뉴7 서브메뉴8 서브메뉴9 서브메뉴10 메뉴4 서브메뉴11 서브메뉴12 메뉴5 .header{position:absolute; left:0; top:0; width:100%; height:100px; transition:all 0.5s; z-index:100;} .header:hover{background-color:#fff;} .header > h1{po.. 2020. 5. 6.
[script] 언어 선택 - 아래로 내려오는 리스트_toggle select 태그처럼 아래로 내려오게 하는 script 언어 선택 및 여러가지 리스트 스타일이 아래로 내려오는 fadeToggle 제이쿼리. 클릭했을때 배경 및 화살표 이미지가 바뀌면서 하위 리스트들이 보여짐. $(document).ready(function(){ $('.lang').click(function(){ $(this).toggleClass('on'); $(this).find('.sub_lang').fadeToggle(300); }); }); LANGUAGE KOR ENG JAP .lang{position:absolute; right:92px; top:30px; display:inline-block; width:140px; height:40px; border:1px solid #dfdfdf; b.. 2020. 5. 4.
[bxslider] bxslider를 이용한 슬라이드 $(document).ready(function(){ $('.sec3_list').bxSlider({ auto:true, pager: false, controls: true, autoControls: false, minSlides: 4, maxSlides: 4, moveSlides: 1, slideWidth: 285, slideMargin: 20, autoHover:true, prevText:"", nextText:"" }); }); 배너슬라이드 배너슬라이드 1 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 2 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 3 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 4 배너슬라이드입니다. 설명 및 내용 텍스트. 배너슬라이드 5 배너슬라이.. 2020. 5. 1.
[animation] 간단한 애니메이션 효과 .box{position:relative; width:260px; height:300px; background-color:orangered;/*background:url(이미지 주소) no-repeat;*/} .box:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(0,0,0,.6); /*background:url(이미지 주소) no-repeat;*/ opacity:0; transition:0.5s all;} .box:after{content:"+"; position:absolute; bottom:20px; left:50%; transform:translateX(-50%); .. 2020. 4. 30.
[script] gnb menu slideToggle $(document).ready(function(){ $(".gnb > li").hover(function(){ $(this).find(".sub_gnb").stop().slideToggle(); $("#header").stop().toggleClass('on'); }); }); menu1 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu2 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu3 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu4 sub_gnb1 sub_gnb2 sub_gnb3 sub_gnb4 sub_gnb5 menu5 sub_gnb1 sub_gnb2 sub_gnb3 sub_.. 2020. 4. 28.
[jquery] 이벤트 객체 - 포커스 이벤트 포커스 이벤트 focus() / blur() / focusin() / focusout() 이벤트 메서드 focus() 대상 요소로 포커스가 이동하면 이벤트를 발생. blur() 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트를 발생. focusin() 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생. focusout() 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생. focus / blur / focusin / focusout 기본형 1. focus() / blur() / focusin() / focusout() 이벤트 등록 $("이벤트 대상 선택").focus(function(){자바스크립트 코드;}); $("이벤트 대상 선택").on("focus.. 2020. 3. 31.
반응형

티스토리툴바