'스크롤 배너'에 해당되는 글 5건

  1. 2009.12.24 [jquery] 스크롤 팔로워 v0.1a - 스크롤 따라 다니는 레이어 배너 or 메뉴 5
웹 프로그래밍/JavaScript , 2009. 12. 24. 10:16

[jquery] 스크롤 팔로워 v0.1a - 스크롤 따라 다니는 레이어 배너 or 메뉴

이전 버전에서 스크롤 했을때 기본 상단 마진값에서 최소 상단 마진값으로 갑자기 이동하는 문제를 수정 했습니다.
이외에는 별다른 수정이 없습니다.

실무에서 사용해보니 대부분 흡족할 만한 성능을 보여줬습니다. 사실 저는 CSS로만 구성하는것을 좋아하는데 디자이너분들께서 꼭 이런걸 원하시네요.. 팔로워의 크기가 크거나 하면 퍼포먼스가 떨어지는 단점이 있습니다만 대부분사용하는 크기에서는 문제가 없었습니다. -  이는 스크립트가 허접하고 최적화 되지 못해서 입니다 ^^; 능력자 분들은 알아서 고쳐 사용하시길 권장 합니다. -

view plaincopy to clipboardprint?
  1. /***********************/  
  2. /* fireskill@gmail.com */  
  3. /* http://blog.bits.kr */  
  4. /*          2009/11/25 */  
  5. /***********************/  
  6.   
  7. /* 
  8. jquery플러그인이므로 jquery를 필수로 사용해야 동작하는 스크립트입니다. 
  9.  
  10. pageAlign : center 또는 left 
  11. pageWidth : 컨텐츠 블럭의 폭(필수값) 
  12. type      : right 또는 left(pageAlign의 값을 center로 했을때만 left값 사용가능) 
  13. topMargin : 페이지 최상단과의 거리 
  14. minTop    : 스크롤 했을때 브라우저 상단과의 거리(topMargin과 같은 값을 넣으면 같은 높이 유지) 
  15. margin    : 컨텐츠 블럭과의 좌 또는 우의 마진(left일때는 오른쪽 마진, right일때는 왼쪽 마진) 
  16. speed     : 따라다니는 속도 
  17. easing    : linear 또는 swing (easing plugin 플러그인을 쓴다면 플러그인 옵션값을 모두 사용할 수 있음) 
  18. zindex    : 필요하다면... 
  19. */  
  20. (function($) {  
  21.   var $doc = $(document);  
  22.   var $win = $(window);  
  23.   $.fn.scrollFollower = function (options){  
  24.     var options = $.extend({}, $.fn.scrollFollower.defaults, options);  
  25.         if (options.pageWidth)  
  26.             var pageWidth    = parseInt(options.pageWidth);  
  27.         else  
  28.         {  
  29.             alert('pageWidth는 필수 옵션값입니다.');  
  30.             return false;  
  31.         }  
  32.     var $layer = $(this);  
  33.     var varType      = options.varType;  
  34.     var pageAlign    = options.pageAlign;  
  35.     var offset       = pageWidth/2;  
  36.     var layerPositon = options.type;  
  37.     var margin       = parseInt(options.margin);  
  38.     var speed        = parseInt(options.speed);  
  39.     var easing       = options.easing;  
  40.     var topMargin    = parseInt(options.topMargin);  
  41.     var minTop       = parseInt(options.minTop);  
  42.     var marginResult = offset + margin;  
  43.     var settedtop    = topMargin + minTop;  
  44.     $layer.css('z-index', options.zindex);  
  45.     $layer.css("position","absolute");  
  46.     if (layerPositon === 'left')  
  47.      varType = 'right';  
  48.     function resetXPosition()  
  49.     {  
  50.       if (pageAlign === 'center')  
  51.       {  
  52.         var $screenSize = $('body').width();  
  53.         var halfScreenSize = $screenSize/2;  
  54.         xPosition = halfScreenSize + marginResult;  
  55.       }  
  56.       else if (pageAlign === 'left')  
  57.       {  
  58.         varType   = 'left';  
  59.         xPosition = pageWidth + margin;  
  60.       }  
  61.       $layer.css(varType, xPosition);  
  62.     }  
  63.     resetXPosition();  
  64.     $layer.css('top',topMargin);  
  65.     $win.resize(resetXPosition);  
  66.     $win.scroll(function(){  
  67.       $top = $doc.scrollTop();  
  68.       if ($top > settedtop)  
  69.         yPosition = $top + minTop;  
  70.       else if ($top < topMargin)  
  71.         yPosition = topMargin;  
  72.       $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});  
  73.     });  
  74.   };  
  75.   $.fn.scrollFollower.defaults = {  
  76.     varType:'left',  
  77.     pageAlign:'left',  
  78.     type:'left',  
  79.     topMargin:0,  
  80.     minTop:0,  
  81.     margin:0,  
  82.     speed:1000,  
  83.     easing:'linear',  
  84.     zindex:10  
  85.     };  
  86. })( jQuery );  


follwer_v01a.zip

'웹 프로그래밍 > JavaScript' 카테고리의 다른 글

팝업창 자동 피팅 시켜주기(크롬 동작)  (2) 2012.08.09
swfobject로 플래시 간단히 넣기.  (0) 2010.02.16
[jquery] 마우스 오른쪽 버튼, 복사 막기, 드래그 금지(불펌방지)  (14) 2009.10.26
[DOM] 브라우저별 childNodes의 개수가 다르다!?  (1) 2009.10.22
[jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴  (6) 2009.10.17
Posted by TheBits
<< 이전페이지 1 2 3 4 5 다음페이지 >>

티스토리툴바