javascript/sample (23) 썸네일형 리스트형 제이쿼리 이미지 슬라이드 제이쿼리 이미지 슬라이드 HTML 섹션 스크롤 체크 var _w; var _sections; function init() { create(); addEvent(); } var _isInSections = []; function create() { _w = $( window ); _sections = $( "#sections" ).children( "section" ); _sections.each( function( $index ){ _isInSections = false; }) } function addEvent() { scrollEvent( null ); _w.on( "scroll", scrollEvent ); resizeEvent( null ); _w.on( "resize", resizeEvent ); } function scrollEvent( $e,.. swiper 탭 슬라이드 swiper 탭 슬라이드 HTML 탭1 탭2 탭3 CSS .tab_list li{ float: left; width:33.3333%; border:1px solid red; box-sizing: border-box; margin-left:-1px; text-align: center;} .tab_list li a{ display:inline-block; padding: 2.5% 0; width: 100%;} .tab_list:after{ content: ''; display:block; clear: both;} JAVASCRIPT $( document ).ready( function(){ var _tabList = $( ".tab_list" ); var _tabTarget = _tabList.childre.. jquery 슬라이더 jquery 슬라이더 HTML 이전 다음 CSS body{ margin:0; padding:0;} li{ list-style: none;} a{ text-decoration: none;} img{ width:100%; } .slider_section{ position: relative;} .btn_list{ position:absolute; top:100px; left:0; width:100%; } .btn_list li:first-child{ float: left; margin-left:300px; margin-right: 0;} .btn_list li{ float:right; margin-right: 300px; margin-left:0;} .slide_wrap{ position: relative; .. jquery 별점 체크 jquery 별점 체크 모바일에서만 작동함. HTML CSS #complete_wrap img{ width:100%; } #complete_wrap .complete_title{ font-size:0; }#complete_wrap .inner{ background:url( ../image/star/complete_bg.jpg ) 0 0 repeat-y; background-size:contain; }#complete_wrap .inner .star_area{ padding-bottom:20.3%;}#complete_wrap .inner .star_area .rating_box{ position: relative; width:75.55555555555556%; margin:0 auto; font-size:.. jquery Math.random값 사용하기 jquery Math.random값 사용하기 CSS body{ margin:0; padding:0; } .number{ text-align: center; font-size:20px; color: #000;} SCRIPT var list = [ 1, 2, 3, 4, 5, 6 ] var len = list.length + 1; var dataText = $( ".number" ); dataText.text( Math.floor( Math.random() * len ) ); HTML 새로고침 될때마다 .number에 텍스트값이 랜덤으로 변경 된다. 이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기 이전 버튼 다음 버튼 클릭 시 해당 녀석 찾기 CSS .dot_list li a{ font-style: normal; font-size:28px; color:#000; text-decoration: none;} .dot_list li.on a{ color:red;} .btn_list li a{ text-decoration: none; color:#000; } HTML 1 2 3 이전버튼 다음버튼 JAVASCRIPT var dotList = $( ".dot_list" ).children( "li" ); var btnPrev = $( ".btn_prev" ); var btnNext = $( ".btn_next" ); var _myIndexNumber = 0; btnPrev.on("click", functio.. 자바스크립트 특정 날짜 자바스크립트 특정 날짜일때 HTML 텍스트 JAVASCRIPT var dDay = new Date( "5/17/2018 00:00:00" ); var nowDay = new Date(); var tiTile = $( "p" ); if( nowDay.getTime() > dDay.getTime() ) { tiTile.css( "display", "none" ); } Date 객체는 날짜와 시간을 처리하는데 사용한다. Date 객체는 new Date로 만든다.. getTime는 1970 년 1 월 1 일 자정 이후의 밀리 세컨드 수와 지정된 날짜를 리턴한다.. 그래서 if문 안에 지금 현재 시간이 지정한 날짜보다 클경우에 실행을 시켜준다.. 이전 1 2 3 다음 목록 더보기