안드로이드 롤링 / jquery 공지 사항 롤링

차근차근/준비중

안드로이드 롤링 / jquery 공지 사항 롤링

예쁜꽃이피었으면 2015. 1. 26. 17:06

검색어 : 안드로이드 롤링

http://jquery-syaku.rolling 상하좌우 롤링 ( 자동롤링 , 버튼 )

http://www.uhoon.co.kr/jQuery/2544

그간 많은 롤링플러그인을 사용해왔으나 이해하기도 쉽고 적용하기도 쉽고 응용하기도 쉽고 TOP 입니다!!

최석균님(제작자)께 감사드립니다.

Test Url : http://www.uhoon.co.kr/test/2544.html Viewer

플러그인 및 샘플 다운로드 (jquery-syaku.rolling.v1.2.0.zip Viewer )

* 제작자님 샘플에는 Javascript 배열에 객체를 직접 담아하도록 되어있으나

현업에서 편의상 html 태그를 Js에 넣어서 사용하기 힘든바 html 소스에서 읽어와서

롤링되도록 샘플소스에 적용하였으니 참고해주세요 .

첨부된 샘플 소스는 제작자님께서 제공하시는 그대로입니다.

하여 쬐끔 수정한 샘플 소스자체를 아래 작성합니다.

<!DOCTYPE html>
<html>
<head>
    <title>상하좌우 롤링 ( 버튼 , 자동 )</title>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="./2544/jquery-syaku.rolling.js"></script>
    <script type="text/javascript">
        jQuery(function() {
 
            jQuery("#srolling").srolling({
                data : $("#aaa > div"),  // 노출될 아이템
                auto : true,                    //자동 롤링 true , false
                width : 20,                 // 노출될 아이템 크기
                height : 30,                    // 노출될 아이템 크기
                item_count : 1,         // 이동 될 아이템 수
                cache_count : 1,            // 임시로 불러올 아이템 수
                delay : 1000,               // 이동 아이템 딜레이
                delay_frame : 500,      // 아이템 흐르는 속도
                move : 'top',               // 이동 방향 left , right , top , down
                prev : '#p_click',          // < 이동 버튼
                next : '#n_click'           // > 이동 버튼
            });
        });
    </script>
</head>
 
<body >
<div id="srolling" style="position: relative;overflow:hidden;width:100px;height:30px;border:#e0e2ef 1px solid;"></div>
<div id="aaa" style="display:none;">
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
</div>
<span id="p_click">이전</span>
<span id="n_click">다음</span>
</body>
</html>

제작자 홈페이지 : http://syaku.tistory.com/202 Viewer

http://maxim365.tistory.com/210

검색어 : jquery 공지 사항 롤링

http://mylko72.maru.net/jquerylab/study/notice-rolling.html

설명

예제-1, 예제-2는 화살표를 클릭하여 아래 또는 위로 공지사항을 롤링하는 예제이다.
이때 공지사항의 처음이나 마지막까지 롤링되면 더 이상 롤링을 하지 않는다.

fn_article(buttonID, containerID);: - buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID

예제-1

[일반]1.T CLOUD 가입하면 스타벅스 커피...2011.08.11
[일반]2.T CLOUD 가입하면 스타벅스 커피..2011.08.11
[일반]3.T CLOUD 가입하면 스타벅스 커피..2011.08.11
[초콜릿]4.11번가와 함께하는 전자청구서...2011.08.11
[일반]5.T CLOUD 가입하면 스타벅스 커피...2011.08.11

예제-2

[일반]1.T CLOUD 가입하면 스타벅스 커피...2011.08.11
[일반]2.T CLOUD 가입하면 스타벅스 커피..2011.08.11
[일반]3.T CLOUD 가입하면 스타벅스 커피..2011.08.11
[초콜릿]4.11번가와 함께하는 전자청구서...2011.08.11
[일반]5.T CLOUD 가입하면 스타벅스 커피...2011.08.11

[일반]1.T CLOUD 가입하면 스타벅스 커피 100%12011.08.11
[일반]2.T CLOUD 가입하면 스타벅스 커피 100%32011.08.11
[일반]3.T CLOUD 가입하면 스타벅스 커피 100%52011.08.11
[초콜릿]4.11번가와 함께하는 전자청구서2011.08.11
[일반]5.T CLOUD 가입하면 스타벅스 커피 100%32011.08.11
[일반]6.T CLOUD 가입하면 스타벅스 커피 100%52011.08.11
[초콜릿]7.11번가와 함께하는 전자청구서2011.08.11
[일반]8.T CLOUD 가입하면 스타벅스 커피 100%32011.08.11

Source Hide

HTML

<div id="notice" class="news">
<div class="open-event" style="width:400px;">
<ul class="notice-list">
<li><a href="#"><strong>[일반]</strong>1.T CLOUD 가입하면 스타벅스 커피...</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>2.T CLOUD 가입하면 스타벅스 커피..</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>3.T CLOUD 가입하면 스타벅스 커피..</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[초콜릿]</strong>4.11번가와 함께하는 전자청구서...</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>5.T CLOUD 가입하면 스타벅스 커피...</a><spanclass="date">2011.08.11</span></li>
</ul>
<span id="bt">
<a href="#" class="prev"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_up.gif"alt="Prev"></a>
<a href="#" class="next"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_down.gif"alt="Next"></a>
</span>
</div>
<script type="text/javascript">fn_article('bt','notice')</script>
</div>

CSS

<style type="text/css">
.news {padding:0 0px 20px;}
.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
.news .open-event ul{position:absolute; top:0px;}
.news .open-event ul#notice1 {left:0;}
.news .open-event ul#notice2 {right:20px;}
.news .open-event ul li {height:20px;}
.news .open-event ul li a {display:inline-block; width:310px;}
.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 span.date {display:inline-block; width:60px;}
.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0;font-size:0;}
.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
</style>

Javascript

function fn_article(buttonID,containerID){
 
var $element = $('#'+containerID).find('.notice-list');
var $prev = $('#'+buttonID).find('.prev');
var $next = $('#'+buttonID).find('.next');
 
var size = new Array();
var cnt = new Array();
var move = $element.children().outerHeight();
 
$element.each(function(idx){
size[idx] = $element.eq(idx).children().length;
cnt[idx] = 0;
});
 
$prev.bind('click',function(){
$element.each(function(idx){
cnt[idx]==0 ? cnt[idx] : cnt[idx]--;
$element.eq(idx).animate({'top':'-'+cnt[idx]*move});
});
return false;
});
 
$next.bind('click',function(){
$element.each(function(idx){
cnt[idx]>=size[idx]-1 ? cnt[idx] : cnt[idx]++;
$element.eq(idx).animate({'top':'-'+cnt[idx]*move});
});
return false;
});
 
}

설명

예제-3은 공지사항의 마지막까지 롤링되더라도 다음 버튼을 클릭하면 처음 공지사항을 이어서 계속 보여준다.
결국 무한 롤링되며 이전 버튼을 클릭하더라도 동일하게 구현된다.

fn_article2(buttonID, containerID);: - buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID

예제-3

[초콜릿]4.11번가와 함께하는 전자청구서...2011.08.11
[일반]5.T CLOUD 가입하면 스타벅스 커피...2011.08.11
[일반]1.T CLOUD 가입하면 스타벅스 커피...2011.08.11
[일반]2.T CLOUD 가입하면 스타벅스 커피..2011.08.11
[일반]3.T CLOUD 가입하면 스타벅스 커피..2011.08.11

Source Hide

HTML

<div id="notice3" class="news">
<div class="open-event" style="width:400px;">
<ul class="notice-list">
<li><a href="#"><strong>[일반]</strong>1.T CLOUD 가입하면 스타벅스 커피...</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>2.T CLOUD 가입하면 스타벅스 커피..</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>3.T CLOUD 가입하면 스타벅스 커피..</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[초콜릿]</strong>4.11번가와 함께하는 전자청구서...</a><spanclass="date">2011.08.11</span></li>
<li><a href="#"><strong>[일반]</strong>5.T CLOUD 가입하면 스타벅스 커피...</a><spanclass="date">2011.08.11</span></li>
</ul>
<span id="bt3">
<a href="#" class="prev"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_up.gif"alt="Prev"></a>
<a href="#" class="next"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_down.gif"alt="Next"></a>
</span>
</div>
<script type="text/javascript">fn_article2('bt3','notice3')</script>
</div>

CSS

<style type="text/css">
.news {padding:0 0px 20px;}
.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
.news .open-event ul{position:absolute; top:0px;}
.news .open-event ul#notice1 {left:0;}
.news .open-event ul#notice2 {right:20px;}
.news .open-event ul li {height:20px;}
.news .open-event ul li a {display:inline-block; width:310px;}
.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 span.date {display:inline-block; width:60px;}
.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0;font-size:0;}
.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
</style>

Javascript

function fn_article2(buttonID,containerID){
var $element = $('#'+containerID).find('.notice-list');
var $prev = $('#'+buttonID).find('.prev');
var $next = $('#'+buttonID).find('.next');
 
var size = new Array();
var move = $element.children().outerHeight();
var first = false;
var lastChild;
 
$element.each(function(idx){
size[idx] = $('#winning').length ? 5 : $element.eq(idx).children().length;
});
 
lastChild = $element.children().eq(-1).clone(true);
lastChild.prependTo($element);
$element.children().eq(-1).remove();
 
if($element.children().length==1){
$element.css('top','0px');
}else{
$element.css('top','-'+move+'px');
}
 
$prev.bind('click',function(){
$element.each(function(idx){
if(!first){
$element.eq(idx).animate({'top': '0px'},'normal',function(){
lastChild = $(this).children().eq(-1).clone(true);
lastChild.prependTo($element.eq(idx));
$(this).children().eq(-1).remove();
$(this).css('top','-'+move+'px');
});
first = true;
return false;
}
 
$element.eq(idx).animate({'top': '0px'},'normal',function(){
lastChild = $(this).children().filter(':last-child').clone(true);
lastChild.prependTo($element.eq(idx));
$(this).children().filter(':last-child').remove();
$(this).css('top','-'+move+'px');
});
});
return false;
});
 
$next.bind('click',function(){
$element.each(function(idx){
 
var firstChild = $element.children().filter(':first-child').clone(true);
firstChild.appendTo($element.eq(idx));
$element.children().filter(':first-child').remove();
$element.css('top','0px');
 
$element.eq(idx).animate({'top':'-'+move+'px'},'normal');
 
});
return false;
});
}

설명

예제-4는 함수의 마지막인자(autoStart)에 true와 함께 호출을 하면 공지사항이 자동롤링된다. 이때 접근성을 위해 제공된 재생/정지 버튼을 통해 공지사항을 자동롤링을 해지하거나 재설정할 수 있다.

fn_article3(containerID, buttonID, autoStart): - containerID : 버튼과 게시물을 포함하고 있는 컨테이너 요소의 ID - buttonID : 버튼을 포함하고 있는 부모 요소의 ID
- autoStart : 자동롤링을 위한 boolean 변수

예제-4

▶ ▣

HTML

<div id="notice5" class="news" style="margin-top:30px; padding-top:0;">
<div class="open-event fl" style="width:400px;">
<ul class="notice-list">
<li><a href="#">1. '보코' 손승연, 美 버클리 음대 합격 "버클리도 반했다"</a><spanclass="date">2011.08.11</span></li>
<li><a href="#">2. K팝스타 러브라인, 이승훈 두고 백아연·이미쉘 신경전?</a><spanclass="date">2011.08.11</span></li>
<li><a href="#">3. '내 아내의 모든 것', '어벤져스' 제쳤다..예매율 1위...</a><spanclass="date">2011.08.11</span></li>
<li><a href="#">4. '사랑비' 이미숙-정진영, 아름다운 이별…</a><span class="date">2011.08.11</span></li>
<li><a href="#">5. 최효종, 다시 한 번 강용석 의원이 고소한다면?</a><span class="date">2011.08.11</span></li>
</ul>
<span id="bt5">
<a href="#" class="prev"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_up.gif"alt="Prev"></a>
<a href="#" class="next"><img src="http://mylko72.maru.net/jquerylab/images/ico/bul_arrow_down.gif"alt="Next"></a>
</span>
</div>
<div class="control fl">
<a href="#" class="play" title="재생">▷</a>
<a href="#" class="stop" title="정지">▣</a>
</div>
<script type="text/javascript">fn_article3('notice5','bt5',true);</script>
</div>

CSS

<style type="text/css">
.news {padding:0 0px 20px;}
.news .open-event {height:16px; position:relative; border:1px solid #ccc; overflow:hidden;}
.news .open-event ul{position:absolute; top:0px;}
.news .open-event ul#notice1 {left:0;}
.news .open-event ul#notice2 {right:20px;}
.news .open-event ul li {height:20px;}
.news .open-event ul li a {display:inline-block; width:310px;}
.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 span.date {display:inline-block; width:60px;}
.news .open-event .prev{position:absolute; top:1px; right:2px; width:7px; height:4px; line-height:0;font-size:0;}
.news .open-event .next{position:absolute; bottom:1px; right:2px; width:7px; height:4px; line-height:0; font-size:0;}
.news .control {float:left; margin:0px 0 0 10px; }
.news .control a.stop {font-size:12px;}
.news .control a.on {color:red; font-size:12px;}
</style>

Javascript

function fn_article3(containerID, buttonID, autoStart){
var $element = $('#'+containerID).find('.notice-list');
var $prev = $('#'+buttonID).find('.prev');
var $next = $('#'+buttonID).find('.next');
var $play = $('#'+containerID).find('.control > a.play');
var $stop = $('#'+containerID).find('.control > a.stop');
var autoPlay = autoStart;
var auto = null;
var speed = 2000;
var timer = null;
 
var move = $element.children().outerHeight();
var first = false;
var lastChild;
 
lastChild = $element.children().eq(-1).clone(true);
lastChild.prependTo($element);
$element.children().eq(-1).remove();
 
if($element.children().length==1){
$element.css('top','0px');
}else{
$element.css('top','-'+move+'px');
}
 
if(autoPlay){
timer = setInterval(moveNextSlide, speed);
$play.addClass('on').text('▶');
auto = true;
}else{
$play.hide();
$stop.hide();
}
 
$element.find('>li').bind({
'mouseenter': function(){
if(auto){
clearInterval(timer);
}
},
'mouseleave': function(){
if(auto){
timer = setInterval(moveNextSlide, speed);
}
}
});
 
$play.bind({
'click': function(e){
if(auto) return false;
 
e.preventDefault();
timer = setInterval(moveNextSlide, speed);
$(this).addClass('on').text('▶');
$stop.removeClass('on').text('▣');
auto = true;
}
});
 
$stop.bind({
'click': function(e){
if(!auto) return false;
 
e.preventDefault();
clearInterval(timer);
$(this).addClass('on').text('■');
$play.removeClass('on').text('▷');
auto = false;
}
});
 
$prev.bind({
'click': function(){
movePrevSlide();
return false;  
},
'mouseenter': function(){
if(auto){
clearInterval(timer);
}
},
'mouseleave': function(){
if(auto){
timer = setInterval(moveNextSlide, speed);
}
}
});
 
$next.bind({
'click': function(){
moveNextSlide();
return false;
},
'mouseenter': function(){
if(auto){
clearInterval(timer);
}
},
'mouseleave': function(){
if(auto){
timer = setInterval(moveNextSlide, speed);
}
}
});
 
function movePrevSlide(){
$element.each(function(idx){
if(!first){
$element.eq(idx).animate({'top': '0px'},'normal',function(){
lastChild = $(this).children().eq(-1).clone(true);
lastChild.prependTo($element.eq(idx));
$(this).children().eq(-1).remove();
$(this).css('top','-'+move+'px');
});
first = true;
return false;
}
 
$element.eq(idx).animate({'top': '0px'},'normal',function(){
lastChild = $(this).children().filter(':last-child').clone(true);
lastChild.prependTo($element.eq(idx));
$(this).children().filter(':last-child').remove();
$(this).css('top','-'+move+'px');
});
});
}
 
function moveNextSlide(){
$element.each(function(idx){
 
var firstChild = $element.children().filter(':first-child').clone(true);
firstChild.appendTo($element.eq(idx));
$element.children().filter(':first-child').remove();
$element.css('top','0px');
 
$element.eq(idx).animate({'top':'-'+move+'px'},'normal');
 
});
}
}

http://darkhorizon.tistory.com/250

저작자표시 비영리

'차근차근 > 준비중' 카테고리의 다른 글

안드로이드 push (0)	2015.01.26
안드로이드 sns연동 (0)	2015.01.26
안드로이드탭 서브 탭 - 모르겠다 (0)	2015.01.26
안드로이드탭 하단탭 (0)	2015.01.26
안드로이드 Splash -로딩 화면 (0)	2015.01.26

현재글안드로이드 롤링 / jquery 공지 사항 롤링

개인 공부를 위한 블로그입니다.

10952, 직장인인강, 자바, 직장인자기계발, docker, 백준, AWS, MYSQL, 한 번에 끝내는 코딩테스트 369 Java편 초격차 패키지 Online., 패캠챌린지, Gunicorn, 패스트캠퍼스후기, Django, 10953, 10951, ubuntu, vuejs, 인증문자, 패스트캠퍼스, nginx,

Today :
Yesterday :

내 인생에도 예쁜 꽃이 피었으면 좋겠다