아즈키의 개발블로그

스타일 적용시에는 styleSheet 오브젝트의 (document.styleSheets : Array) 메소드를 사용하는데,

• IE 에서는 addRule 을 사용

인자값을 3개(필수3개)로,

1. 0번 argument에는 선택자('div', 'p' 등..)를 넣고,
2. 1번 argument에는 스타일 명령("color:blue", "overflow:hidden" 등..)을 넣는다.
3. 2번 argument에는 0부터 시작하는 pages 컬렉션(document.styleSheets[?].pages : Array)에서의 위치할 인수를 넣는다. (-1을 넣으면 제일 뒤에 위치하게 된다.)
   반환값은 항상 -1이다. (주의: 오류가 없어도 -1을 반환)
   

• FF 에서는 insertRule 를 사용

인자값은 2개(필수2개)로,

1. 0번 argument에는 스타일 명령을 선택자를 포함하여 넣는다. (예: "#myTable {-moz-user-select:none}")
2. 1번 argument에는 0부터 시작하는 cssRules 컬렉션(document.styleSheets[?].cssRules : Array)에서의 위치할 인수를 넣는다. (주의: addRule과는 다르다, -1 인자값을 넣으면 에러가 난다.)
   반환값은 cssRules 컬렉션에서의 위치한 위치값이다.
   

ps. 아즈키네 2번째 블로그 옛글중에 가져옴 (http://2.azki.org/182)

Posted by 아즈키

자바스크립트 막코딩으로 (특별한 animation/effect 라이브러리 사용 없이) 뒤집는 효과를 구현해 보았습니다

구현을 위주로 엉망으로 짠 코드라  부끄럽지만, 올리고 봅니다.

• url

http://fliptest.azki.org/proto.html
(상수값으로 효과를 만들어본 첫번째 버전)
http://fliptest.azki.org/
(몇가지 변수를 적용할 수 있는 두번째 버전)

• 소개
  

4각형과 3각형의 조합으로 접히는 효과를 내보았습니다.
실제 flip 과정중 캡쳐화면입니다.
그리고 element 의 구성은 3가지로 이루어져 있습니다.
왼쪽 삼각형과 오른쪽 삼각형이 입체적으로 착각하도록 할 수 있습니다.

삼각형을 만드는 방법은 참고사이트중 Triangles in Javascript 에 자세하게 나와있습니다.

• 참고 사이트

http://lab.smashup.it/flip/
(Flip!0.4 - A jQuery plugin)
http://www.uselesspickles.com/triangles/demo.html
(Triangles in Javascript)
http://www.xentrik.net/css/filters.php
(CSS Filters)


ps.
참고사이트중 Flip!0.4 - A jQuery plugin 에서 처음 flip 효과를 보았는데,
그 flip 은 Opera browser 를 지원하지 못합니다. 제가 만든 것은 됩니다 :]
테스트 한 브라우저 목록입니다.

• FF2, FF3
• IE6, IE7, IE8
• Opera 9
• safari 3 (windows)
• Chrome 0.3

Posted by 아즈키

등록 부분

콜백 부분

mouse wheel 관련 자료를 찾아보니 살짝? 오동작도 하고 크롬 브라우저에 대한 처리가 안되어있어 수정하여 적용중인 코드.

IE6, IE7, IE8beta, FF2, Opera9, Safari3, Chrome0.2 에서 테스트 됨.

Posted by 아즈키