'플로팅 배너'에 해당되는 글 5건

  1. 2009.09.21 [jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #2 2
웹 프로그래밍/JavaScript , 2009. 9. 21. 16:45

[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #2

업데이트 되었습니다.
2009/10/12 - [웹 프로그래밍/JavaScript] - 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #3


아래처럼 바꿔어 봤습니다.
레이어로 쓸 ID만 floating으로 하고 values 라는 속성을 주고 값만 json 비스무레 하게 두면 됩니다.

이름/값은 다음과 같다..(기본값)
pageWidth :  컨텐츠의 폭(기본값 0)
leftOffet : 중앙에서 오른쪽으로 얼마나 떨어질 것 인가?(기본값 0)
topOffset : 위에서 얼마나 떨어질것인가?(기본값 0)
leftMargin : pageWidth보다 작을때 왼쪽에서 얼마나 떨어질것인가? (기본값 0)
speed : 움직일 속도 (기본값 1000msec)
easing : 움직이는 방법 (easing 플러그인을 안쓴다면 linear와 swing 두가지, 기본값 linear)
zindex : zindex 깊이.. (사용 안해도 그닥..기본값 10)
view plaincopy to clipboardprint?
  1. $(document).ready(function(){  
  2.   var $doc           = $(document);  
  3.   var position       = 0;  
  4.   var top            = $doc.scrollTop();  
  5.   var screenSize     = 0;  
  6.   var halfScreenSize = 0;  
  7.   var $layer         = $('#floating');  
  8.   var tValues        = $layer.attr('values')  
  9.   $layer.css("position","absolute");  
  10.   
  11.   if (tValues)  
  12.   {  
  13.     setValues = eval("("+tValues+")");  
  14.   
  15.     var pageWidth  = (setValues.pageWidth)? parseInt(setValues.pageWidth):'0';  
  16.     var leftOffset = (setValues.leftOffset)? parseInt(setValues.leftOffset):'0';  
  17.     var leftMargin = (setValues.leftMargin)? parseInt(setValues.leftMargin):'0';  
  18.     var speed      = (setValues.speed)? parseInt(setValues.speed):'1000';  
  19.     var easing     = (setValues.easing)? setValues.easing:'linear';  
  20.     var topOffset  = (setValues.topOffset)? parseInt(setValues.topOffset):'0';  
  21.     $layer.css('z-index', (setValues.zindex)? setValues.zindex:'10');  
  22.   }  
  23.   else  
  24.   {  
  25.     var pageWidth = 0;  
  26.     var leftOffset = 0;  
  27.     var leftMargin = 0  
  28.     var speed = 1000;  
  29.     var easing = 'linear';  
  30.     var topOffset = 0  
  31.     $layer.css('z-index', 10);  
  32.   }  
  33.   function resetXPosition()  
  34.   {  
  35.     $screenSize = $('body').width();  
  36.     halfScreenSize = $screenSize/2;  
  37.     xPosition = halfScreenSize + leftOffset;  
  38.     if ($screenSize < pageWidth)  
  39.       xPosition = leftMargin;  
  40.     $layer.css('left', xPosition);  
  41.   }  
  42.   if (top > 0 )  
  43.     $doc.scrollTop(topOffset+top);  
  44.   else  
  45.     $doc.scrollTop(0);  
  46.   $layer.css('top',topOffset);  
  47.   resetXPosition();  
  48.   $(window).resize(resetXPosition);  
  49.   $(window).scroll(function(){  
  50.     yPosition = $doc.scrollTop()+topOffset;  
  51.     $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false});  
  52.   });  
  53. });  
  54. <div id="floating" values="{'pageWidth':'0','leftOffet':'100','topOffset':'100','leftMargin':'500','speed':'500','easing':'swing','zindex':'10'}"  >  
  55.   레이어 내용  
  56. </div>  


jQuery 플러그인처럼 만들까 싶다가.. 솔직히 귀찮기도 하고 이것 만으로도 매우 만족하기 때문에 앞으로 개량 할 일은 없을 것 같습니다..  -한 페이지에 두개이상은 안됩니다만.. 뭐 두개 쓸일이 아직은 없었기 때문에.. 앞으로 개량이 된다면 그 정도일것 같습니다.-

아래것을 쓰던 이것을 쓰던 동작에는 아무런 차이가 없습니다..
페이지별로 날개 배너의 위치라던가 뭐 그런게 다르면 이걸 쓰면 되고요..

아래는 1편..
2009/08/16 - [웹 프로그래밍/JavaScript] - 스크롤 따라 다니는 레이어 배너 or 메뉴

ps. 역시나 능력자님들께서는 알아서 고쳐 쓰시길.. 하긴 능력자는 이걸 복사해 쓰지도 않겠지만 말입니다..ㅎㅎ  머 오는 사람이있어야..
저작자표시 비영리 동일조건

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

[jquery] 마우스 오른쪽 버튼, 복사 막기, 드래그 금지(불펌방지)  (14) 2009.10.26
[DOM] 브라우저별 childNodes의 개수가 다르다!?  (1) 2009.10.22
[jquery] 스크롤 팔로워 v0.1 - 스크롤 따라 다니는 레이어 배너 or 메뉴  (6) 2009.10.17
[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용) #3  (4) 2009.10.12
[jquery] 스크롤 따라 다니는 레이어 배너 or 메뉴 (중앙정렬용)  (5) 2009.08.16
Posted by TheBits
<< 이전페이지 1 2 3 4 5 다음페이지 >>

티스토리툴바