2012.01.17 14:41

jQuery를 이용한 이미지 롤링(Rolling) 두번째

jQuery 이미지 롤링 조금 발전 시킨 버젼을 추가해 봅니다. 롤링이란 키워드가 일일 방문의 절대 다수로 이뤄지고 있기 때문에 지난 번 포스팅 했던 내용에 좀더 살을 붙이고 쓰임새가 좀더 있는 넘으로 즉 끌어 붙이만으로 나름 동작하는 버젼으로 발전 시켜서 혹시라도 이용할 사람들에게 조금이라도 보탬이 되고자 몇자 적어 봅니다.

개선된 내용
  1. 링크 기능 추가(접힌 부분의 클릭 시 넓어지기, 넓혀진 부분의 클릭 시 링크로 이동)
  2. 이미지 갯수를 li 요소의 갯수로 대체
  3. 가려지는 시간과 보여지는 시간차로 인한 스크립트 오류 수정
  4. 하나의 파일에서 내용 확인 가능하도록 완성된 html 로 수정
아직 해결하지 않은 부분
  1. 이미지의 크기가 현재 코드에 부합하는 크기일꺼란 보장이 없다. 현재 코드 상으로는 넓이 350을 기준으로 이미지를 슬라이딩 하게 해놓은 상태이다. 즉 적용하고자 하는 부분에서 이미지 크기가 350 보다 크거나 작다면 원하는 크기의 이미지 크기로 코드를 수정해 주어야 한다. 
  2. 가려지는 부분의 크기 역시 현재 80px 으로 고정된 상태이다. 이미지 넓이가 350px 인게 4개라고 했을 때 최조 보여지는 부분의 크기가 590px 이여야 한다. 600px 섹션에 뭔가를 꽉 체우려면 여분의 크기를 82.5로 제어해 주어야 한다. 즉 현재 80 으로 세팅된 부분을 82.5 또는 이미지의 갯수 크기에 따라 다르게 세팅해 주어야 한다는 점이다. 만약 350px 넓이에서 이미지가 롤링만 되길 원한다면 80 으로 표시된 부분을 0 으로 고쳐 주어야 한다. 내가 최초 원했던 컨셉은 뒤편의 이미지들이 삐죽이 보이게 하는 것이었습니다.
아래 고쳐진 코드를 하나의 html 로 묶어서 보기 좋게 다시 편집해 두었습니다.

최종 소스 확인


2011/11/24 - [뭐하는데/이따위로 만든다] - jQuery 롤링(Rolling) 이미지 처리

 
    
    
저작자 표시
신고
크리에이티브 커먼즈 라이선스
Creative Commons License
Trackback 0 Comment 3


티스토리 툴바