javascript (32) 썸네일형 리스트형 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문 안에 지금 현재 시간이 지정한 날짜보다 클경우에 실행을 시켜준다.. 트윈맥스(TweenMax ) 트윈맥스(TweenMax ) 트윈맥스를 사용하는 이유 jquery animate의 움직임이 부드럽다 jquery animate은 초당 30프레임일 경우 트윈맥스는 초당 60프레임이다. 그러므로 더 자연럽게 애니메이션을 할수 있다. 트윈맥스 코드 TweenMax.to('.box', 2, {width:100,height:100,repeat:1}) '.box' 는 엘리먼트, {객세 속성} repeat은 반복 횟수 이며, repeat:-1을 주면 무한 반복이다. repeatDelay는 반복 지연시켜준다. 이 속성을 쓰기 위해서는 repeat속성이 반드시 들어가야한다. yoyo속성은 우직이는 경로와 똑같이 반복효과?같다. yoyo특성상 불린값 true랑 false값을 사용한다. 팝업 데이터로 불러오기 팝업 데이터로 불러오기 HTML 팝업1 팝업2 팝업3 팝업4 X 데이터 텍스트 들어가는 곳 CSS .popup_layer{ display:none; position: absolute; top:0; left:50%; width:800px; margin-left:-450px; border:1px solid red; z-index:200; background:#fff;} .popup_layer .inner{ position: relative; padding:15px;} .popup_layer .inner .btn_close{position: absolute; top:-30px; right:0; font-size:20px; color:#fff; text-decoration: none;} .popup_layer .. 원페이지 스크롤 원페이지 스크롤 html 클릭 1 클릭 2 클릭 3 클릭 4 클릭 5 클릭 6 javascript var _w, _sT; var _sections; var $navCont = $( "nav" ), $navTarget = $navCont.children( "ul" ).children( "li" ); function create() { _w = $( window ); _sections = $( "section" ); } function addEvent() { scrollEvent( null ); _w.on( "scroll" , scrollEvent ); $navTarget.on( "click", navClick ); } var _index = 0; var _prevIndex = -1; //스크롤 실행 시 네.. 이전 1 2 3 4 다음