- 그래프 플러그인 (널리) http://nuli.navercorp.com/sharing/nwagon#nWagon-chart6 https://naver.github.io/billboard.js/?fbclid=IwAR1T_sMqzOOktLwtj9vBOH17Ke3kiPFiy_b2nCgA9LrLWt7P6wXJh6JbWHM - 무료 차트 - ChartJS [MIT License] (canvas) : https://www.chartjs.org/ sample : https://www.chartjs.org/samples/latest/ aip(ko) : https://yeon22.github.io/Chartjs-kr/docs/latest/getting-started/usage.html - TOAST chart [MIT..
function imScrollTop(selector){ var _position = $(selector).offset(); $( 'html, body' ).animate( { scrollTop: _position.top }, 500 ); }; function scroll_motion() { var _wH = window.innerHeight; var _wS = $(window).scrollTop(); var _wHS = (_wH + _wS); $('.section').each(function () { var _t = $(this).offset().top + (_wH / 2); var _th = $(this).offset().top + $(this).innerHeight(); console.log(_wH..
- AngularJS : https://angularjs.org/ - bootstrap : http://bootstrapk.com/BS3/getting-started http://markusslima.github.io/bootstrap-filestyle/# - 3D : http://d3js.org/ - Flat-UI : http://designmodo.github.io/Flat-UI/ - 반응형 모바일 레이아웃 : http://vnjs.net/www/project/freewall/ - 레이아웃 관련 플러그인 - UI.Layout => http://layout.jquery-dev.com/index.cfm - jLayout => http://w2ui.com/web/demo - gridster - masonr..
6.10 instanceof 키워드1) 객체가 어떠한 생성자 함수를 통해 생성됬는지 확인할때 instanceof 키워드 사용. 2) typeof , instanceof typeof => 타입을 알아냄 instanceof => 생성자함수를 알아냄 코드 6-29 instanceof 키워드 DOCTYPE html> // 생성자 함수를 선언합니다. function Student(name) { this.name = name; } // 생성자함수를 사용해 함수를 생성하여 변수에 담음. // 자바스크립트는 대소문자 구분합니다. var student = new Student('윤인성'); // Student 상속받은 student 함수 객체 생성방법 // instanceof는 타입을 비교하여 (true,false)를 ..
17.11 jQuery UIEffect 플러그인 (2) – easing 플러그인1) 기존 jQuery를 사용할 때 교과 관련 메서드의 easing 속성에 문자열 “swing” ,”linear” 만으로 Easing을 줄수있다. 표17-7 다양한 종류의easing 속성linearswing easeInElasticeaseOutElasticeaseInOutElasticeaseInBackeaseOutBackeaseInOutBackeaseInBounceeaseOutBounceeaseInOutBounceeaseInSineeaseOutSineeaseInOutSineeaseInQuadeaseOutQuadeaseInOutQuadeaseInCubiceaseOutCubiceaseInOutCubiceaseInCirceaseOu..
17.9 jQuery UI Effect 플러그인 다운로드 1) jQuery UI플러그인 공식사이트 : http://jqueryui.com/ 2) jQuery UI Effect 기능 ◆ 색상 애니메이션 ◆ addClass() , removeClass(), switchClass() 메서드에 애니메이션 기능추가 ◆ Easing 효과 17.10 jQuery UIEffect 플러그인 (1) – 색상 변환 애니메이션1) addClass(class,speed)메서드와 removeClass(class,speed) 메서드의애니메이션 2) $('div').hover( over ,out ); 코드 17-29DOCTYPE html> .reverse { color:White; background-color:Black; } $(..
17.8 jQuery Approach플러그인 1) jQuery Approach 플러그인은 마우스의 거리를 사용해 애니메이션을 발쌩시키는 플러그인 2) 다운로드 : http://srobbin.com/jquery-plugins/jquery-approach/ 3) approach({ 스타일 } , 효과 적용거리 ) 코드 17-25 approach()DOCTYPE html> * { margin:0px; padding:0px; } body { background:0x555; } #circle_wrapper { padding:10px; background-color:Black; overflow:hidden; } .circle { margin:5px; width:50px; height:50px; border-radi..
17.7 애니메이션 지연1) delay(duration) : 메서드의 매개 변수에 정지하려는 시간을 미리초 단위로 입력 [delay함수의 duration 파라미터 값을 미리 초단위로 입력 (1000 = 1초)] 코드 17-21DOCTYPE html> div { width:100px; height:100px; background-color:Orange; border:solid #ff0000; position:relative; } $(document).ready(function () { /* each 앞에 꺼를 반복 실행합니다. */ $('div').each(function (index ,domElement) { /* Type1 */ // (index * 500)초 후 animate() 메서드를 실행합니다...
17.6 애니메이션 정지1) $(selector).stop(); == $(selector).stop(false,false);◆ 실행 애니메이션을 정지한다.◆ 기본값 (false,false). 2) $(selector).stop(clearQueue , goToEnd); ◆ 애니메이션큐를 삭제 한다 ◆ clearQueue : true => 효과 애니메이션 큐의내용을 제거◆ goToEnd: true => 실행중인 애니메이션 최종위치로바로이동 코드17-20 DOCTYPE html> div { width:100px; height:100px; background-color:Orange; position:relative; } $(document).ready(function () { // 이벤트를 연결합니다. $('b..
T17-4~6 jQuery 메서드 (효과)
- Total
- Today
- Yesterday