본문 바로가기

자바스크립트5

jQuery 페이지 스크롤링(scrolling) 플러그인 jQuery 페이지 스크롤링(scrolling) 플러그인 클릭에따라 페이지로 가는 플러그인이다. CSS3로 구며줬고 변경가능은 페이지이동시 속도(duration)이다. 미리보는 데모 http://sianasiatiger.cafe24.com/study/Jp_scroll.html HTML 코드 네비게이션은 다음과 같이 구성한다. 아이디명, 클래스명을 잘봐두자 ↑ Prev ↓ Next Comments Reply 맨위로 콘텐츠 html소스는 다음과 같다.클래스의명을 post로 해주었다. 포스팅 1내용물,그림등 포스팅 2내용물,그림등 포스팅 3내용물,그림등 포스팅 4내용물,그림등 포스팅 5내용물,그림등 네비게이션 네비게이션은 페이지이동해도 유지하도록 고정으로 해준다. #nav-dock { position: fix.. 2010. 7. 6.
DOM 라운드박스 심플 먼저 올린 라운딩 박스는 가로 세로 내용물 모두 자유롭게 설정가능하다. 그런데 굳이 가로가 일정치라면 그방법대로 할필요가 없다. 이번엔 가로 사이즈가 정해진경우 목적은 태그 내용물 //아래 라운드박스 //먼저요구되는건 insertAfter 함수. insertBefore은 스크립트에서 지원되지만 insertBefore은 없다 //두함수의 기능은 insertBefore(A, B); :B 엘레먼트앞에 A를 삽입 insertAfter(A, B); :B 엘레먼트뒤에 A를 삽입 //먼저 insertAfter을 만들어준다, 원리는 insertBefore를 역이용한것이다. function insertAfter(newElement,targetElement) { var parent = targetElement.parent.. 2009. 7. 2.
dom 라운드 박스 원래 의도는 둥근박스를 위해서 의미 없는 불필요한 클래스를 여러개 지정해야 하는데...이를 자바로 따로 생성한다. 의도하고자하는 기본 html는 다음과 같고 sdsasd 사용될 html은 준비할 이미지는 box.gif(이미지 에디터 에서 제작한 커다란 라운드 박스) borders.gif(양쪽 라인)이둘. css는 .box { margin: 15px 0 0 0; padding: 5px 0 5px 0; } /* cbb 자바스크립트가 지원 안될때 */ .cbb { margin: 0 10px 0 10px; background: #FFF; padding: 5px 0 5px 0; line-height: 170%; } /* 메인박스 */ .cbb p, .cb p { margin: 0; padding: 0 5px 5p.. 2009. 7. 2.
DOM 함수 addLoadEvent 함수를 여러번 사용할때 쓰는 addLoadEvent function A(){ } function B(){ } function C(){ } . . . function D(){ } 여러합수를 사용할때 전역 함수가 아닌 경우, 그리고 각함수에 귀찮게 이벤트핸들러를 줄필요없게 쓰는함수이다. addLoadEvent ( 함수명); 그리고 순차적으로 실행된다. addLoadEvent(A) ; addLoadEvent(B) ; 코드는 다음과 같다 function addLoadEvent(func) { var oldonload = window.onload; if (typeof window.onload != 'function') { window.onload = func; } else { window.onload = funct.. 2009. 7. 2.
티스토리 카테고리 메뉴... 메뉴를 보면 답답함이 느껴 질떄가 있는데... 카테고리를 보면 줄줄이 이어져있는모습..떄론 좋기도 하지만 답답하기도 하다. 이걸 자바스크립트로 대체 시켜서 바꿀순없을까 하는 생각도.. 아직 내게 그정도 능력은 없지만..ㅎㅎ 2008. 10. 1.