'날개 배너'에 해당되는 글 5건
- 2009.10.17 [jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴 6
웹 프로그래밍/JavaScript
, 2009. 10. 17. 12:28
[jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴
버그 픽스버전이 포스팅 되었습니다
2009/12/24 - [웹 프로그래밍/JavaScript] - [jquery] 스크롤 팔로워 v0.1a - 스크롤 따라 다니는 레이어 배너 or 메뉴
이전 버전을 jquery 플러그인 형식으로 바꾸었습니다.
사용 방법 및 예제는 압축 파일에 있으므로 다운로드 받아 확인 하시기 바랍니다.
- 컨텐츠블럭이 좌측 또는 중앙정렬일 경우 사용(우측 정렬을 사용하는 싸이트는 본적이 없어서..)
- 상하좌우 픽셀단위 위치값 설정 가능
- 따라다니는 속도 설정가능
- animation easing 옵션 사용가능
- z-index 설정 가능
테스트된 브라우저는 다음과 같습니다.
Chrome 3.0.195.27
Firefox 3.5.3
Safari 4.0.3 (531.9.1)
Opera 10 (1750)
IE6, IE7, IE8 (각 최종 및 최신-작성일 기준)
테스트된 마크업은
html 4.01
xhtml 1.0
테스트된 DTD는
strict
transitional
- /***********************/
- /* fireskill@gmail.com */
- /* http://blog.bits.kr */
- /* 2009/11/25 */
- /***********************/
- /*
- jquery플러그인이므로 jquery를 필수로 사용해야 동작하는 스크립트입니다.
- pageAlign : center 또는 left
- pageWidth : 컨텐츠 블럭의 폭(필수값)
- type : right 또는 left(pageAlign의 값을 center로 했을때만 left값 사용가능)
- topMargin : 페이지 최상단과의 거리
- minTop : 스크롤 했을때 브라우저 상단과의 거리(topMargin과 같은 값을 넣으면 같은 높이 유지)
- margin : 컨텐츠 블럭과의 좌 또는 우의 마진(left일때는 오른쪽 마진, right일때는 왼쪽 마진)
- speed : 따라다니는 속도
- easing : linear 또는 swing (easing plugin 플러그인을 쓴다면 플러그인 옵션값을 모두 사용할 수 있음)
- zindex : 필요하다면...
- */
- (function($) {
- var $doc = $(document);
- var $win = $(window);
- $.fn.scrollFollower = function (options){
- var options = $.extend({}, $.fn.scrollFollower.defaults, options);
- if (options.pageWidth)
- var pageWidth = parseInt(options.pageWidth);
- else
- {
- alert('pageWidth는 필수 옵션값입니다.');
- return false;
- }
- var $layer = $(this);
- var varType = options.varType;
- var pageAlign = options.pageAlign;
- var offset = pageWidth/2;
- var layerPositon = options.type;
- var margin = parseInt(options.margin);
- var speed = parseInt(options.speed);
- var easing = options.easing;
- var topMargin = parseInt(options.topMargin);
- var minTop = parseInt(options.minTop);
- var marginResult = offset + margin;
- var settedtop = topMargin + minTop;
- $layer.css('z-index', options.zindex);
- $layer.css("position","absolute");
- if (layerPositon === 'left')
- varType = 'right';
- function resetXPosition()
- {
- if (pageAlign === 'center')
- {
- var $screenSize = $('body').width();
- var halfScreenSize = $screenSize/2;
- xPosition = halfScreenSize + marginResult;
- }
- else if (pageAlign === 'left')
- {
- varType = 'left';
- xPosition = pageWidth + margin;
- }
- $layer.css(varType, xPosition);
- }
- resetXPosition();
- $layer.css('top',topMargin);
- $win.resize(resetXPosition);
- $win.scroll(function(){
- $top = $doc.scrollTop();
- if ($top > settedtop)
- yPosition = $top + minTop;
- else if ($top < topMargin)
- yPosition = topMargin;
- $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});
- });
- };
- $.fn.scrollFollower.defaults = {
- varType:'left',
- pageAlign:'left',
- type:'left',
- topMargin:0,
- minTop:0,
- margin:0,
- speed:1000,
- easing:'linear',
- zindex:10
- };
- })( jQuery );
'웹 프로그래밍 > JavaScript' 카테고리의 다른 글
[jquery] 마우스 오른쪽 버튼, 복사 막기, 드래그 금지(불펌방지) (14) | 2009.10.26 |
---|---|
[DOM] 브라우저별 childNodes의 개수가 다르다!? (1) | 2009.10.22 |
[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #3 (4) | 2009.10.12 |
[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #2 (2) | 2009.09.21 |
[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) (5) | 2009.08.16 |