컨텐츠 바로가기


스마트디자인 팁 상세
제목 [스마트디자인] 메인 게시판목록에 롤링 효과 적용하기
작성자 대표 관리자 (ip:) 작성일 2015-12-02 09:54:05 조회수 5036


메인 게시판목록에 롤링 효과 적용하기


게시판 목록을 아래로 하나씩 롤링해주는 스크립트를 적용해보겠습니다.










디자인 관리 > 디자인 편집창을 열고 소스를 수정합니다.

1. 화면추가버튼을 클릭하여 게시판롤링 관련 css, js파일을 추가합니다. (css, js소스는 하단에 있습니다.)

2. 하단소스를 활용하여 css, js 파일을 만든 후에 쇼핑몰메인(index.html)에서 게시판영역을 클릭하여 해당소스로 이동 한 후 아래 이미지의 2번과 같이 소스를 추가합니다.

주황색 소스 : 추가한 css,js 파일을 로드시킴
파란색 소스 : js가 적용되도록 id값을 부여함

<div id="boardArea">
    <!--@css(/css/module/layout/boardVerSlide.css)-->
    <!--@js(/js/module/layout/boardVerSlide.js)-->    
    <div id="boardVerticalSlide_1" module="board_listpackage_5">




[/css/module/layout/borderVerSlide.css]

/*
    메인 >  자유 게시판 롤링
*/
.boardVerSlideArea { overflow:hidden; position:relative; }
.boardVerSlideArea .list { position:absolute; left:0px; width:100%; }

[/js/module/layout/borderVerSlide.js]

 /*
    게시판 롤링
*/
$.fn.boardVerSlide = function (settings) {
    settings = $.extend({
        view : 5,
        direction : 'up',
        delay : 5000
    }, settings);
    var option = [];
    option = $.extend({}, $.fn.boardVerSlide.defaults, settings);
    return this.each(function () {
        $.fn.extend(this, boardVerSlide);
        this.wrap = $(this);
        this.option = option;
        this.direction = this.option.direction;
        this.delay = this.option.delay;
        this.view = this.option.view;
        this.init();
    });
};
var boardVerSlide = {
    init : function(){
        var direction = this.direction;
        var delay = this.delay;
        var table = this.wrap.find('table');
        var tbody = table.find('> tbody');
        var view = this.view;
        var tableHeight = table.outerHeight();
        var trLength = tbody.find('> tr').length;
        var trHeight = tbody.find('> tr').outerHeight();
        var boardVerSlideAreaHeight = trHeight * view;
        table.wrap('<div class="boardVerSlideArea" style="height:'+ boardVerSlideAreaHeight +'px;" />');
        table.wrap('<div class="list" />');
        var boardVerSlideArea = this.wrap.find('.boardVerSlideArea');
        var list = this.wrap.find('.list');
        table.find('caption').remove();
        table.find('thead').remove();
        if ($.browser.webkit) {
            var tdBorderBottom = parseInt(tbody.find('tr > td').css('border-bottom-width'));
            var padddingBottom = (view * tdBorderBottom) + 1;
            boardVerSlideArea.css({'paddingBottom': padddingBottom + 'px'});
        }
        function action() {
            switch(direction){
                case "up":
                    var item = tbody.find('> tr:first-child');
                    var itemClone = item.clone();
                    tbody.append(itemClone);
                    if ($.browser.opera || $.browser.webkit) {
                        list.css({'marginTop':'-1px'});
                    }
                    list.css({'top':0}).animate({'top': '-' + trHeight +'px'}, function(){
                        list.css({'top': 0});
                        item.remove();
                    });
                break;
                case "down":
                    var item = tbody.find('> tr:last-child');
                    var itemClone = item.clone();
                    tbody.prepend(itemClone);
                    list.css({'bottom':0}).animate({'bottom': '-' + trHeight +'px'}, function(){
                        list.css({'bottom': 0});
                        item.remove();
                    });
                break;
            }
        }
        var timer;
        var timerStart = function(){
            timer = setInterval(function(){
                action();
            },delay );
        }
        timerStart();
        this.wrap.mouseenter(function(){
            clearTimeout(timer);
        });
        this.wrap.mouseleave(function(){
            timerStart();
        });
    }
}
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_2").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});





※ 롤링 옵션 설정 변경하기

* boardVerSlide.js 에서 롤링 옵션 설정 부분을 변경하면 롤링되는 시간과 보여지는 갯수를 수정할 수 있습니다.
이 때, view :5 의 숫자와 게시판모듈의 $count = 5 변수의 숫자가 동일해야 합니다.

boardVerSlide.js
... 생략

$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_2").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});

index.html
... 생략
               <tbody module="board_list_5">
                <!--
                    $count = 5
                    $main_list = yes
                    $subject_cut = 25
                    $main_list_reply_view = no
                -->
                <tr>





※ 다수의 게시판에 활용하기

롤링 스크립트를 다수의 게시판에 활용하는 팁입니다. boardVerSlide.js 의 아래 소스부분을 복사해서 추가로 붙여넣습니다.

붙여넣은 소스에서 #boardVerticalSlide_1 이 값을 #boardVerticalSlide_2 또는 #boardVerticalSlide_3 으로 변경합니다.


boardVerSlide.js
... 생략
/* ***** 복사 ***** */
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_1").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
}); /* ***** 복사 ***** */
/* ***** 붙여넣기 ***** */
$(function(){
    /*
        메인 > 자유 게시판 롤링 옵션 설정
        - direction : up(위로)
        - delay : 타이머(기본 5초 == 5000)
        - view : 보여질 개수
    */
    $("#boardVerticalSlide_2").boardVerSlide({
        direction : 'up',
        delay : 3000,
        view : 5
    });
});

롤링효과를 적용하고 싶은 게시판모듈에 추가한 id값을 넣어줍니다.
이와 같이 소스를 추가해주면 2개의 게시판목록에 롤링효과가 적용됩니다.

<div id="boardArea">
    <!--@css(/css/module/layout/boardVerSlide.css)-->
    <!--@js(/js/module/layout/boardVerSlide.js)-->    
    <div id="boardVerticalSlide_2" module="board_listpackage_5">



첨부파일
목록 관리자게시 삭제 수정