[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)

$(document).ready(function(){ var $doc = $(document); var position = 0; var top = $doc.scrollTop(); var screenSize = 0; var halfScreenSize = 0; var $layer = $('#floating'); var tValues = $layer.attr('values') $layer.css("position","absolute"); if (tValues) { setValues = eval("("+tValues+")"); var pageWidth = (setValues.pageWidth)? parseInt(setValues.pageWidth):'0'; var leftOffset = (setValues.leftOffset)? parseInt(setValues.leftOffset):'0'; var leftMargin = (setValues.leftMargin)? parseInt(setValues.leftMargin):'0'; var speed = (setValues.speed)? parseInt(setValues.speed):'1000'; var easing = (setValues.easing)? setValues.easing:'linear'; var topOffset = (setValues.topOffset)? parseInt(setValues.topOffset):'0'; $layer.css('z-index', (setValues.zindex)? setValues.zindex:'10'); } else { var pageWidth = 0; var leftOffset = 0; var leftMargin = 0 var speed = 1000; var easing = 'linear'; var topOffset = 0 $layer.css('z-index', 10); } function resetXPosition() { $screenSize = $('body').width(); halfScreenSize = $screenSize/2; xPosition = halfScreenSize + leftOffset; if ($screenSize < pageWidth) xPosition = leftMargin; $layer.css('left', xPosition); } if (top > 0 ) $doc.scrollTop(topOffset+top); else $doc.scrollTop(0); $layer.css('top',topOffset); resetXPosition(); $(window).resize(resetXPosition); $(window).scroll(function(){ yPosition = $doc.scrollTop()+topOffset; $layer.animate({"top":yPosition }, {duration:speed, easing:easing, queue:false}); }); }); <div id="floating" values="{'pageWidth':'0','leftOffet':'100','topOffset':'100','leftMargin':'500','speed':'500','easing':'swing','zindex':'10'}" > 레이어 내용 </div>

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

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

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

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