javascript (32) 썸네일형 리스트형 VIDEO TAGE 관련된 내용 정리 VIDEO태그 관련된 내용 정리 속성 currentTime = 현재 재생 위치를 초 단위로 가져 오거나 설정duration = 영상 총 재생 시간loadeddata = 영상이 생성되고 난 뒤에 체크 할떄 모바일 터치 드래그 슬라이드 모바일 터치 드래그 슬라이드( 모바일 기계에서만 작동됨 ) HTML 0 SCSS #wrap{ width:100%; max-width:720px; margin:0 auto; font-size:0; #drag_box{ $pLR : 40; $pW : 720 - ( $pLR * 2); padding: 0 pImg( $pLR ); .bar_box{ margin-top:pImg( 32, $pW ); position: relative; width:100%; overflow: hidden; .bar{ display:block; width:100%; padding-bottom: pImg( 50, $pW ); background:#000; border-radius: 1.2rem; } .cricle{ display:inli.. 제이쿼리 메뉴 제이쿼리 메뉴 HTML menu1 menu2333 menu2143 me CSS body{ margin:0; padding:0; } a{ text-decoration: none; } ul, ol{ list-style: none; margin:0; padding:0;} header{ width:100%;} .header_area{ margin: 10px 0;} .header_inner{ width:1280px; margin:0 auto;} .one_depth-list{ width:100%; text-align: center; } .one_depth-list li{ display: inline-block; margin: 0 24px;} .one_depth-list li a{ display:block; font.. 오늘 하루 안보기 팝업 오늘 하루 안보기 팝업 HTML X 여기가 팝업 글 내용 오늘하루 안보기 CSS .btn_open{ text-align: center; font-size:20px; display:inline-block; margin:0 auto; text-decoration: none;} .dimd{ display:none; position: fixed; top:0; left:0; width: 100%; height: 100%; background: #000; opacity: 0.8; z-index:10;} #popup_layer{ display:none; position: absolute; top:0; left:50%; margin-left:-400px; width:800px; background:#fff; z-ind.. 비오는 효과 제이쿼리 비오는 효과 제이쿼리 HTML CSS body{ margin:0; padding:0;} #wrap{ position: relative; background:#151515; width:100%; height:100vh; overflow: hidden;} .item_list{ position: relative; top:0; left:0;} .item_list li{ position: absolute; top:0; left:0; opacity: 0;} SCRIPT function create() { _w = $( window ); _itemList = $( ".item_list" ); _itemTarget = _itemList.children( "li" ); _wH = _w.height(); console.l.. 제이쿼리 이미지 슬라이드 제이쿼리 이미지 슬라이드 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.. 이전 1 2 3 4 다음 목록 더보기