자바스크립트 (51) 썸네일형 리스트형 210711 비디오 플레이 그누보드 사용해서 홈페이지 제작 중인데 메인 화면의 중간에 있는 메뉴 중 클릭하면 샘플 동영상을 보여주는 게 필요해짐. 그래서 video 태그랑 약간의 css, js 를 사용해서 만들었다. HTML : 그누보드 기본 구조를 그냥 쓰고 있는데 모양이 양 사이드에 패딩이 잡혀 있다. 그래서 sample_video 부분을 콘텐츠 시작 아래 부분의 내용에 같이 넣으면 비디오 재생 화면을 화면 전체로 확대하는 게 안 되는 거 같음. 그래서 sample_video 부분을 콘텐츠 바깥에 만들었다. 메뉴 부분에 id=tag를 한 이유는 다른 메뉴들은 다 링크여서 hover 할 때 css가 이미 만들어져 있어 이 메뉴에도 같은 효과 적용을 위해 링크에 태그를 걸어서 그 위치에 비디오 재생 화면이 뜨도록 함. Your b.. 210319 게시판 글 목록 더 보기(more 버튼 달기) JS $('.list_item').hide(); $('.list_item').slice(0, 12).show(); $("#list_item_btn").click(function(e){ // Load More를 위한 클릭 이벤트e e.preventDefault(); $(".list_item:hidden").slice(0, 12).show(); // 숨김 설정된 다음 n개 표시 if($(".list_item:hidden").length == 0){ // 숨겨진 DIV가 있는지 체크해서 없으면 more 버튼 숨기기 $('#list_item_btn').hide(); } }); 출처 : www.thewordcracker.com/jquery-examples/add-load-more-button-jquery/ 'Lo.. 210319 탑버튼 화면 top 부분부터 어느 부분까지는 보이지 않게 되어 있다가 스크롤 다운해서 지정한 위치에 가면 보이도록 HTML CSS 위치 고정 #q_menu { display:none; position: fixed;top:85%; -webkit-transform: translateY(-85%); -ms-transform: translateY(-85%); transform: translateY(-85%); right:calc(50% - 700px); } JS1 스크롤 다운 위치에 따라 보여주기, 숨기기 $(window).scroll(function() { if($(this).scrollTop() > 900) { $("#q_menu").fadeIn('fast'); } else { $("#q_menu").fadeOut.. 210315 메뉴 아이콘 클릭시 전환 효과주기 원래는 i_toggle fadeOut 으로 시작하는 부분 바로 밑에 있는 css bacgkround 부분만 각각 들어가 있었다. 버튼을 클릭하면 배경이미지만 변경 되어 클릭할 때 아이콘이 왔다 갔다 바뀌는 효과가 나도록. 그러다가 아이콘이 바뀔 때 효과가 들어가면 좋겠다 해서 추가. $('#show_menu').click(function() { if ($('#bd_sub_wrap').css('display') == 'none') { $('#i_toggle').fadeOut('fast', function() { $('#i_toggle').css({'background': 'url("/img/toggle_x.png") no-repeat center center','background-size':'18px'}.. 210313 click할 때 메뉴 보이기, 숨기기 jquery toggle 사용 $('#show_search').toggle( function(){ $('#hd_sub').show(); }, function(){ $('#hd_sub').hide(); } ); 210219 상단 메뉴 스크롤에 따라 배경색 줬다가 투명하게 원래는 투명한 상단 메뉴를 스크롤바 내리면 배경색 줘서 메뉴 텍스트 잘 보이게 했다가 다시 상단 꼭대기로 돌아오면 투명하게 바뀌도록 하기. HTML 상단 메뉴 내용 CSS #hd_wrapper {width:100%;height:120px;} JS : jquery-ui.js 파일 import 필요! $(document).ready(function() { cnt=0; $(document).scroll(function() { cnt = $(this).scrollTop(); if (cnt> 210) { //1 배경색 노 투명 $('#hd_wrapper').stop().animate({'background-color':'#fff'},50); //2 : 배경색 투명도 주기 $('#hd_wrapper').stop().. 210201 jquery not this EX1) ul li 로 만든 리스트에서 swipeleft 했을 때 해당 li의 자식 요소인 del 클래스를 보여주고 그 외의 다른 li의 del 클래스는 숨김 $("li").on("swipeleft",function(){ $(this).children('.del').show(); $('li').not(this).children('.del').hide(); }); EX2) 래디오 버튼 클릭 했을 때, 클릭한 래디오 버튼 제외한 나머지는 체크 해제 attr = $('input:radio'); attr.on('change', function() { attr.not(this).prop('checked',false); }); 210201 최신 버전의 jquery 언제나 최신 버전의 jquery를 사용하기. 210114 jquery 메뉴에 마우스를 올렸을 때, 떼었을 때 1. mouseover, mouseout $('.menu_ul_li') .mouseover(function() { $('.menu_sub_div').show(); $('.menu_wrap').css({'height':'130px'}); }) .mouseout(function() { $('.menu_sub_div').hide(); $('.menu_wrap').css({'height':'50px'}); }); 2. hover, (unhover) $('.menu_wrap' ).hover( function(){ $('.menu_sub_div').show(); $('.menu_wrap').animate({'height':'130px'},{queue:false,duration:300}); }, function(){.. 210113 완전 심플 슬라이더2(자동으로 넘어가는 이미지 슬라이더) 구글에 carousel slider plugin 등등 조합해서 검색하면 굳이 안 만들어도 사용이 쉽고 간편하고 예쁜 슬라이더 많다. 그럼에도 굳이 만들어 쓰는건 아주 간단한 코드로 내가 나중에 다시 봐도 헷갈리지 않고 필요한 거 수정 변경해서 쓰고 싶기 때문이다. 이 슬라이더는 좌, 우 버튼 없이 설정한 시간에 맞춰 자동으로 다음 이미지로 넘어간다. HTML CSS #wrapper { width:100%; text-align:center; height:600px; } .slider_ul { display:inline-block; vertical-align:top; } .slider_li { display:none; } javascript : 아래 코드 중 i 부분에 이미지 슬라이더가 있는 ul의 아이디를.. 이전 1 2 3 4 ··· 6 다음
