가카리의 공부방

라인같은 사이트를 보면 다음과 같은 이미지 슬라이더가 있습니다. 흰색 버튼을 누르면 화면이 전환됩니다. 이러한 기능을 이번에 구현해봅시다. 화면 구성을 먼저 html의 div 태그로 나누게 되는데 1. slider_panel : 실제 이미지가 들어가는 곳 2. slider_text_panel : 텍스트가 들어가는 곳 3. control_panel : 버튼이 들어가서 클릭시 이미지가 슬라이드됨. 위와같이 div태그로 화면을 구성하였습니다. 소스중에서 css에서 left 속성을 –300으로 보내는 것이 있는데 –300이면 화면 밖이므로 즉, 화면 밖으로 보내서 실제 유저의 화면에는 안보이게 하는 것입니다. 여기서 가장 주의해야 할 점은 제일 상위 css클래스인 animation_canvas(캔버스)는 ove..

stop 메소드는 효과 및 애니메이션을 정지하는 메소드입니다. 그리고 다음 2가지 파라미터를 가집니다. clearQueue와 goToEnd인데 첫 번째 파라미터를 true로 설정하면 clearQueue 메소드를 실행하는 것과 같은 효과를 냅니다. 두 번째 파라미터 인 goToEnd를 true로 설정하면 제자리에서 멈추는 것이 아니라 지정한 최종 형태에서 멈춥니다. 소스코드 DOCTYPE html> div{ width: 100px; height: 100px; background-color: orange; position: relative; } $(document).ready(function(){ //이벤트를 연결합니다. $('button').click(function(){ //변수 선언 var html =..

애니메이션 큐에 대해서 알아봅시다. jquery 효과는 먼저 실행된 순서대로 실행하게됩니다. 다음 소스를 보고 어떤 애니메이션부터 실행될지 예상해봅시다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; position: relative; } $(document).ready(function(){ //클릭시 animate 메소드를 체이닝으로 연결했습니다. //큐에 들어가서 차례로 실행이 됩니다. $('div').click(function(){ $(this).animate({ left: '+=60' }, 2000).animate({ width: '+=60' }, 2000).animate({ height: '+=60' },..

이번에는 현재 스타일 속성을 알아내서 추가 값을 부여하여 animate 메소드 를 사용해 동적으로 애니메이션을 적용하는 예제입니다. 간단하므로 소스코드를 바로 보시면 이해가 되실겁니다. 소스코드 DOCTYPE html> div{ width: 50px; height: 50px; background-color: orange; } $(document).ready(function (){ $('div').click(function(){ //변수를 선언합니다. var width = $(this).css('width'); var height = $(this).css('height'); //animate 메소드를 사용합니다. //즉 클릭시 다음 animate 메소드 효과가 적용됩니다. $(this).animate({ ..