UI Laboratory

UI 개발을 위한 레퍼런스

jQuery
실시간 Posts
Rolling

function fn_fadeToSlide(containerID, speedNum)
- containerID : list와 컨트롤 버튼을 포함하고 있는 컨테이너 요소의 ID
- speedNum : 자동롤링시 롤링되는 속도
설명
예제-1은 트위터나 블로그 포스트처럼 최근 게시글을 실시간으로 업데이트해서 보여주고자 하는 경우 위에서 아래로 슬라이드되어 보여진다. 이때 슬라이드되는 게시글은 페이드되어 나타난다.

예제-1

HTML

					

실시간 Posts Updating.

CSS

					<style type="text/css">
						.news {width:280px; margin:5px auto 0; padding:0 0px 20px;}
							.news .open-event {height:200px; position:relative; border:1px solid #ccc; overflow:hidden;}
							.news .open-event ul{position:absolute; bottom:0px;}
							.news .open-event ul#notice1 {left:0;}
							.news .open-event ul#notice2 {right:20px;}
							.news .open-event ul li {height:50px; margin-bottom:10px; padding:0 10px; overflow:hidden;}
							.news .open-event ul li:after {content: "."; display: block; height: 0px; clear: both; visibility: hidden;}
							.news .open-event ul li a {display:inline-block;}
							.news .open-event ul li a:hover {color:#8f7614; text-decoration:underline;}
							.news .open-event ul li a strong {margin-right:10px;}
							.news .open-event ul li p {width:200px;}
					</style>
				

Javascript

					<script type="text/javascript">

						fn_fadeToSlide('posts', 3000);

						function fn_fadeToSlide(containerID, speedNum){
							var $element = $('#'+containerID).find('.notice-list');
							var auto = null;
							var speed = speedNum;
							var timer = null;
							var cnt = $element.children().length-5;

							var move = $element.children().outerHeight();
							var first = false;
							var lastChild;

							//목록을 역순으로 정렬하기 위한 함수
							reverseList();

							var firstChild = $element.children().filter(':first-child').clone(true);
							firstChild.appendTo($element.eq(-1));
							$element.children().filter(':first-child').remove();

							if($element.children().length==1){
								$element.css('top','0px');
							}else{
								$element.css('bottom','-'+move+'px');
								$element.children().eq(cnt).css('opacity',0);
							}

							timer = setInterval(movePrevSlide, speed);
							auto = true;

							$element.find('>li').bind({
								'mouseenter': function(){
									if(auto){
										clearInterval(timer);
										auto = false;
									}
								},
								'mouseleave': function(){
									if(!auto){
										timer = setInterval(movePrevSlide, speed);
										auto = true;
									}
								}
							});

							function reverseList(){
								var lists = $element.find('>li').get().reverse();

								//for(var i=0;i<lists.length;i++){
								//	alert(lists[i].innerHTML);
								//}

								$element.empty();
								$.each(lists, function(i){
									$element.append("<li>" + lists[i].innerHTML + "</li>");
								});
							}

							function movePrevSlide(){
								$element.children().eq(cnt-1).css('opacity',0);
								$element.each(function(idx){
									lastChild = $(this).children().filter(':last-child').clone(true);
									lastChild.prependTo($element.eq(idx));
									$(this).children().filter(':last-child').remove();
									$(this).css('bottom','0px');

									$element.eq(idx).animate({'bottom': '-'+move+'px'},'normal',function(){
										$(this).children().eq(cnt+1).animate({'opacity': '1'});
									});
									return false;
								});
							}
						}

					</script>