메인 공지사항 기능소개 매뉴얼     TEST BOARD : [1]  [2]  [3]  [4]  [5]
내용없음9
내용없음10
      APPLICATION
무료 스킨.모듈

유료 스킨.모듈

활용 홈페이지

활용팁 공유

자료 공유

유틸리티

웹 스터디
제작자 리소스

최근 활용팁 공유 RANK
신홍
3
기즈모SOFT
1
모두모두
1
4
작은소망
1
        -- update:30Min --


스크롤 따라다니는 배너,메뉴,퀵버튼(중앙정렬,좌측정렬)
 application
활용팁 공유
테크노트 사용에 관련된 노하우를 공유하는 게시판입니다.
홈페이지 작업/운용중에 알게 된 여러가지 활용팁을 올려 주세요.
나에겐 그저 습관일 뿐이던 것이 누군가에겐 엄청 큰 힘과 도구가 되는 경우가 많답니다.
자료등록시 적립되는 포인트는 200P 입니다.
     
  작성자 시누 ,   http://www.onizzang.com
  분 류 응용
ㆍ조회: 6128  ㆍ추천: 0         
ㆍ작성일: 2007년 2월 10일 토요일
스크롤 따라다니는 배너,메뉴,퀵버튼(중앙정렬,좌측정렬)
테크노트와는 별개의 팁입니다만, 사실 홈페이지를 만들면서 우측의 스크롤바를 따라다니는
퀵바, 메뉴, 배너등을 많이 사용하게 됩니다.
초반엔 홈페이지를 좌측정렬로 많이 제작했는데 근래들어 모니터의 대형화로
1280x1024사이즈의 화면구도를 쓰는 유저가 많아지다보니, 좌측정렬이 조금씩 디자인계에서
외면당하고 있는 실정입니다.
그래서 지금까지 사용되었던 좌측정렬방식에서 중앙정렬 방식으로 바뀌면서 어려운부분이
스크롤바 따라다니는 퀵바,메뉴,배너(이하 배너라고 하겠습니다.)입니다.
보통 이는 레이어를 이용하는 경우가 많은데, 레이어가 좌측을 기준으로 하다보니
1024x768화면에서 중앙정렬방식으로 제작한 디자인에 따라다니는 배너가
1280x1024화면에서 로딩하면 좌우측 넓이가 더 넓어지면서 위치가 전혀 의도하지 않은곳에 달라붙게
됩니다.
이것을 해결하는 "스크롤바 따라다니는 배너 소스"입니다.
단, 자체 수정한것이다 보니 스크롤이 무자게 딱딱합니다. '부드럽게'는 아주 거리가 멉니다.
이부분을 수정하실수 있는분 수정해주시고 이곳에 공유해주시면 감사하겠습니다.
전문 프로그래머가 아니다 보니 어렵네요..

 소스시작 =============================================================================
아래의 800은 홈디자인할때 프레임크기입니다. 가령 프레임을 800으로 했으면 800을 넣어주세요
780은 800하고 20정도 차이가 나는데 20은 프레임과 "움직이는배너"사이의 폭정도가 됩니다.
아래 200은 "움직이는배너"와 위에서부터의 간격입니다.
아래 스크립트를 기본적으로 스크립트 넣는 곳에 넣어주시고..

<script LANGUAGE="JavaScript">
var Bleft;
function scroll(){
Bleft=800 + (document.body.clientWidth-780)/2
var a=document.body.scrollTop+200
Banner.style.left=Bleft;
Banner.style.top=a
}
window.onresize=scroll;
</script>

아래의 DIV문이 실제로 움직이는 움직이는 배너입니다.
레이어 내용에 프레임이나 링크버튼등 넣으면 되겟죠?

<div id="Banner" style="background-color:red; width:120px; height:65px; position:absolute; left:333px; top:176px; z-index:1; layer-background-color:red; ">레이어 내용</div>

       
  0
3500
FILE #1 .
FILE #2 .
FILE #3 .
FILE #4 .
FILE #5 .
FILE #6 .
FILE #7 .
FILE #8 .
FILE #9 .
FILE #10 .
윗글 왕초보, 왕비초보를 위한 mysql 간단 사용법
아래글 게시판 부운영자 표시하기
1185 모바일 웹.. 아이폰, 아이패드 iwindow 레이어 문제 해결 [2] 신홍 2017-02-12
1184 모바일에서 주소복사 기능 [1] 신홍 2017-02-10
1183 모바일 [무료모바일프로그램]안드로이드 스튜디오 [2] 작은소망 2017-01-25
1182 게시판에 효율적으로 광고를 하려면... [1] 신홍 2017-01-04
1181 수정 올더게이트 통신 IP 변경 안내 모두모두 2016-12-05
1180 쇼핑몰 회원 장바구니 유지하기 [1] 기즈모SOFT 2016-12-05
1179 수정 커스터마이징된 파일첨부 필드에서 파일 삭제방법 [2] TECHSTAR 2016-10-17
1178 네이트 팀룸으로 메시지 전송~ [2]+2 Terrorboy 2016-09-20
1177 수정 특정 변수값의 한글이 깨질때 사용-삭제 모두모두 2016-09-05
1176 댓글 목록 제한 스크립 추가시 생기는 제한 [1] cherryboyz 2016-07-21
1175 푸시불렛 소스 [2]+4 Terrorboy 2016-06-30
1174 응용 게시물의 날짜 및 시간 변경 [2] 모두모두 2016-05-31
1173 수정 0(제로) 검색 [1] 기즈모SOFT 2016-05-09
1172 운영 종전에 보드 URL을 유보드 URL로 리로딩되게하는 팁. 요나단 2016-04-26
1171 모듈 페이스북처럼 스크롤따라 동영상 재생 컨트롤하는 rolVideo.min... [1]  : DN:1103 rolVideo.min.js : DN:1268 starbros 2016-03-29
1170 DB 오름차순 정렬시 null 또는 공백이 먼저 나오는 문제 해결 기즈모SOFT 2016-03-23
1169 응용 변덕쟁이 IE에서 innerHTML 쌍따옴표 있다 없다 [2] 기즈모SOFT 2016-03-16
1168 확장 게시글 카카오톡 링크 서비스 연동 [5]+4 TECHSTAR 2016-02-24
1167 지정된 시간외에 어떤 문구를 나타나게 할때.. [3]+3 TECHSTAR 2016-01-29
12345678910,,,63