- playsinline : iOS에서 동영상이 내장플레이어로 실행되는것을 막아준다(브라우저 내부에서 실행) - autoplay : 자동실행, mobile 환경이나 chrome 브라우저에서는 음성이 없을 때(muted) 자동실행된다. 그 외에는 사용자 입력(버튼클릭) 시 실행 가능 iOS 비디오 정책 : https://webkit.org/blog/6784/new-video-policies-for-ios/ Chrome 비디오 자동재생 정책 : https://developers.google.com/web/updates/2017/09/autoplay-policy-changes 1. Video Play document.getElementById(video).play(); 2. Video Pause documen..
스크롤이 맨 아래로 내려갔을때 추가되는 게시판 리스트 공부사이트 : http://seonn.ivyro.net/example/more_board/index_scroll.html //더보기 시 리스트를 5개씩 들고오기 var board = $("#board"); var addObj="";addObj+="추가1"; addObj+="추가2"; addObj+="추가3"; addObj+=""; //스크롤이 맨 끝에 내려왔을때 $(window).scroll(function(){ var scrolltop = $(window).scrollTop(); if( scrolltop == $(document).height() - $(window).height() ){ for(i=0; i= $(document).height() -..
Image Zoomer(출처) : http://www.dynamicdrive.com/dynamicindex4/featuredzoomer.htm 공부사이트 : http://seonn.ivyro.net/example/zoom_effect/ 마우스 오버 시 이미지 줌 되는 플러그인jQuery(document).ready(function($){ $('#image1').addimagezoom({ zoomrange: [3, 10], //줌레벨설정 초기수치 3부터 마우스휠로 10까지 늘릴수있다. magnifiersize: [300,300], //픽셀확대영역 크기 설정 magnifierpos: 'left', //확대영역 위치 설정 cursorshade: true, largeimage: 'images/img11_big...
iScroll : http://cubiq.org/iscroll-4 ♧ iScroll 기본 셋업 - html code 내용 - css code#wrapper{ position:absolute; z-index:1; top:45px; bottom:0; left:0; width:100%; overflow:auto; } #wrapper #scroller{ position:absolute; z-index:1; -webkit-tap-highlight-color:rgba(0,0,0,0); width:100%; padding:0; } - script codevar myScroll; function loaded() { myScroll = new iScroll('wrapper'); } document.addEventList..
오른쪽 상단에 스크롤따라 졸졸 따라다니는 퀵메뉴 ♤ html codetop 내용 ♤ css code#quick_menu{position:absolute; left:600px; top:100px; width:50px; height:50px; background:blue;} ♤ script codevar boxtop=parseInt($('#quick_menu').css('top')); //#quick_menu의 세로 위치값 $(window).scroll(function(){ $('#quick_menu').stop(); if(navigator.userAgent.indexOf("Chrome" && "Safari") > 0){ $('#quick_menu').stop().animate({'top': document..
1. parallax scroll스크롤시 배경과 오브젝트가 서로 다른 속도로 움직인다. 2. scroll to메뉴를 누르면 해당되는 영역으로 스크롤이 움직인다. 공부페이지 : http://seonn.ivyro.net/example/parallax/ ♧ 사용한 플러그인1. parallax소스설명 : http://www.davecranwell.com/content/jquery-scroll-parallax-plugin다운 : https://github.com/davecranwell/jQuery-scroll-parallax2. scroll tohttp://demos.flesler.com/jquery/scrollTo/
ESC로 레이어 팝업 해제하기레이어팝업 생성 시 open 클래스 부여한 후, esc를 누르면 open 클래스를 가진 div를 숨긴다. ▣ javascript code $(document).keydown(function(event){ if(event.keyCode != 27) return true; if( $("#popup").hasClass("open") ){ $("#background").fadeOut(); $("#popup").fadeOut().removeClass("open"); } return false; }); ▣ html code
네이버 회원가입 폼을 참고하여 회원가입 폼을 만들어보았다. 값은 정규표현식을 사용하여 적절한지 판단.. //정규표현식 var reg_uid = /^[a-z0-9_]{5,12}$/; //5~12자 영문소문자, 숫자, 특수문자 _ 사용가능 var reg_upw = /^(?=.*[a-zA-Z])(?=.*[!@#$%^*+=-]|.*[0-9]).{6,24}$/; //6~16자 영문대소문자, 숫자, 특수문자 혼합하여 사용 var reg_nickname = /^[0-9a-zA-Z가-힣]{4,20}$/; //한글10자, 영문20자, 한글,영문,숫자 사용가능 //스타일 내역 var s_default = {"border":"1px solid #ccc", "background-color":"#fff"}; //기본 var s..