제이쿼리같은 자바스크립트 라이브러리가 나오기전까지 웹디자이너나 개발자들에게 플래시를 이용하지 않고 웹페이지를 재로딩없이 애니메이션이나 인터액티브 기능을 추가하는 것은 불가능했습니다. 자바스크립트가 메이저 웹브라우저에서 지원이 안됐기때문이죠. 자바스트립트 라이브러리가 없으면 브라우저와 자바스크립트간에 호환성 해결을 위해 자바스크립트의 해박한 지식이 필요했습니다. 제이쿼리는 다양한 브라우저와 호환성이 좋은 라이브러리를 제공하고 있으며 배우는 시간도 상대적으로 짧으며 자바스크립트 프로그래밍하는데 수많은 반복적인 작업을 더욱 빠르게 처리할 수 있는 함수를 제공하고 있습니다. 애플의 아이폰이 플래시를 지원하지 않고 제이쿼리 같은 자바스크립트를 이용해서 애니메이션을 실행하면서 제이쿼리가 더욱 각광을 받고 있는 가운..
제이쿼리는 타인이 만든 것을 손쉽게 설치할 수 있어서 사용하기 아주 편리합니다. 웹 애니미에션 프로그램으로 플래시가 많이 쓰였는데 애플 아이폰에서 플래시를 제외시키고 제이쿼리로 대체하면서 제이쿼리에 대한 관심이 높아졌습니다. 플러그인을 만들려면 제이쿼리와 자바스크립트에 대한 지식이 많아야하겠지만 어떤 프로그램을 사용하기 위해서 그 프로그램을 다 알아야 사용할 수 있는 것은 아니듯이 남이 만든 간단한 제이쿼리 플러그인을 설치할 줄만 안다면 제이쿼리를 사용할 줄 아는 것이 됩니다. 개발자들은 수없이 많고 무료로 공개되는 것이 많으며 상품성있는 좋은 플러그인은 저가에 판매되기도 합니다. 플래시는 남이 만든 것을 수정해서 사용하려면 플래시를 잘 알아야 가능하지만 제이쿼리는 플러그인 이라는 말 그대로 끼워넣기만 ..
수정한 데모보기 링크 이곳 을 클릭하면 이미 만들어 놓은 제이쿼리 배너를 수정하여 사용할 수 있도록 공개해 놓았고 DEMO를 클릭하면 어떤 내용인지 알 수가 있습니다. 다운로드를 클릭하면 다음의 압축파일을 다운 받을 수 있습니다. 이 배너에는 이미지 회전, 슬라이드인 아웃, 줌인 아웃 등 여러가지 애니메이션이 되므로 원하는대로 응용할 수 있습니다. function부분의 내용입니다. 주석을 달아놓았으니 참고하세요. $('#ca_banner1').banner({ steps : [ [ //1 step: [{"to" : "2"}, {"effect": "zoomOutRotated-zoomInRotated"}], //1번째 div, 2번 이미지 줌아웃회전, 3번 이미지 줌인회전 [{"to" : "1"}, {}], ..
이전글 에서 하나의 버튼으로 두가지 기능을 하는 토글효과를 이용한 슬라이딩 메뉴를 알아보았는데 이것은 html요소를 위 아래로만 감추거나 나타나게 하고 좌우로 슬라이딩효과를 주려면 제이쿼리의 animate 기능을 이용합니다. 화면 밖에 감추었다가 버튼을 클릭하면 화면 안으로 나타나게 하는 슬라이딩 애니메이션 효과를 알아봅니다. 업그레이드 버전은 아래의 링크에 있습니다. https://martian36.tistory.com/1559 이글이 도움이 되셨다면 추천↑ 부탁드립니다. Toggle 에디터에 코드를 입력하고 웹브라우저에 실행하면 아래 데모링크처럼 잘 되는데 블로그에서는 열리고 닫는 두개의 이미지가 나타나지 않아서 하나의 이미지를 사용했습니다. 데모링크 링크 오른쪽에 배치할 경우의 파일은 아래를 사용하..
첨부파일을 열면 html코드와 제이쿼리 라이브러리, 아이콘이 있습니다. 두가지 메뉴가 있는데 하나는 클릭해야 슬라이드 되고 하나는 마우스 오버하면 슬라이드 됩니다. Accordion Menu Using jQuery Works on clicking Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 Works with mouse over Header-1 Link-1 Link-2 Link-3 Header-2 Link-1 Link-2 Link-3 Header-3 Link-1 Link-2 Link-3 데모링크 링크
제이쿼리의 슬라이드토글은 하나의 버튼으로 두가지 효과가 있는 토글효과로 메뉴를 슬라이드 시켜서 감추거나 보이도록 하는 효과입니다. open home menu1 menu2 menu3 첨부파일을 웹브라우저에서 열고 open이라는 글자를 클릭하면 메뉴가 사라지고 나타나는 토글버튼의 역할을 합니다. ul태그안의 내용은 아무리 길어도 토글효과의 대상이 됩니다. 메뉴가 처음부터 안나오게 하려면 ul태그 안에 inline style을 삽입합니다. 빨간색 코드만 삽입하면 로딩시 메뉴가 안보이고 open을 클릭하면 나타납니다.
데모를 확인하시려면 다음 링크를 클릭하세요. 링크 압축을 풀면 제이쿼리 라이브러리 파일, easing파일, lavalamp파일, lavalamp 축소파일, 스타일시트파일이 있습니다. 이미지는 2개가 있습니다. 각각 폴더에 저장하고 다음의 링크에서 경로를 수정하고 헤드태그에 삽입합니다. 이미지는 이미지 폴더에 저장하고 css에서 경로를 수정합니다. 네비게이션 메뉴가 3개 있는데 demo.html파일을 열면 3종류의 메뉴가 있고 이중 하나를 수정해서 사용합니다. css파일에도 3종류가 있으니 알맞는 것을 복사해서 사용하면 됩니다. 임베디드 제이쿼리 코드도 다음과 같이 3종류에 대해 연결이 되어있으니 수정하면 됩니다. 스피드의 700은 0.7초입니다. 수정해서 사용하면 됩니다.
맥 컴퓨터 하단의 아이콘은 마우스 오버시 크게 늘어나면서 마우스를 이동하면 작아집니다. 이런 기능을 이용한 메뉴바로 방문자에게 재미를 선사하기도 합니다. CSS와 제이쿼리, 피시아이(Fisheye) 플러그인을 이용해서 만든 것으로 첨부파일을 압축해제하면 상하 두곳에 위치한 소스와 상, 하에 위치한 html파일이 있으니 골라서 사용하면 됩니다. 사용법은 다음과 같습니다. 1. html 헤드태그에 다음의 코드를 삽입합니다. 물론 자신의 웹사이트 경로에 맞춰야합니다. 기본적으로 js폴더가 있다는 가정입니다. 스타일시트도 경로에 맞춰 삽입합니다. 지금은 기본폴더에 있지만 css폴더에 저장한다면 href="css/style.css"로 바꿔야합니다.
CSS와 제이쿼리를 이용한 드랍다운 메뉴입니다. 원본이 섹시하다고 했으나 그다지 섹시하지는 않습니다. 원본 출처 html부분입니다. Home Tutorials Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Resources Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link Sub Nav Link About Us Advertise Submit Contact Us CSS부분입니다. 제이쿼리부분입니다. 헤드태그에 다음을 삽입하면 별도의 js폴더를 만들지 않아도 됩니다. 다음의 링크를 클릭하면 데모를 볼 수 있습니다. 링크
제이쿼리 라이브러리는 보통 js폴더에 삽입해서 소스불러오기를 하는데 구글에 있는 라이브러리를 사용하면 여러가지 면에서 장점이 있습니다. 우선 라이브러리를 불러올때 접속자의 컴에서 구글의 라이브러리를 불러오므로 내서버에 부담을 주지 않습니다. 두번째로 구글의 서버는 어떤 서버보다도 빠릅니다. 그러니 로딩도 빠릅니다. 그리고 접속자가 구글의 라이브러리를 사용하는 다른 사이트에 방문했었다면 다시 로딩되는 일이 없어서 속도가 빨라집니다. 또한 모든 버전의 제이쿼리 라이브러리를 저장하고 있기 때문에 라이브러리 버전이 안맞아서 오류가 나는 일이 없습니다. 다음의 코드를 삽입하면 됩니다.
제이쿼리를 이용하면 문서전체를 우클릭 방지하거나 일정 부분의 블럭을 방지할 수 있습니다. 제이쿼리는 전체적으로 이해하지 않아도 코드를 가져다 사용하면 됩니다. 이런 코드는 이런 경우에 사용하고 어떤 부분을 고치면 된다. 정도만 알면 됩니다. 대신에 기본적인 html은 반드시 아셔야합니다. 아래 코드를 보면 제이쿼리 라이브러리는 구글에 있는 것을 사용하므로 별도로 라이브러리를 만들 필요는 없습니다. 3개의 div이 있는데 그중 두개의 div에 대해서는(div1,div2) 우클릭 방지가 되고 나머지 하나는(div3) 우클릭이 가능합니다. 문서전체에 대해서 우클릭 방지를 하려면 "#div" 대신에document를 넣으면 됩니다. 우클릭하면 메뉴가 보이지 않습니다. 우클릭하면 메뉴가 보이지 않습니다. 우클릭하면..