티스토리 뷰




html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<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><span class="date">2011.08.11</span></li>
            <li><a href="#">2. K팝스타 러브라인, 이승훈 두고 백아연·이미쉘 신경전?</a><span class="date">2011.08.11</span></li>
            <li><a href="#">3. '내 아내의 모든 것', '어벤져스' 제쳤다..예매율 1위...</a><span class="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>
cs


css


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
    .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;}
 
cs


Javascript


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
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');
 
        });
    }
}
cs


저작자 표시 비영리 변경 금지
신고
댓글쓰기 폼
  • BlogIcon SONYLOVE 2017.02.11 12:27 신고
    너무 길어서 스킨에 넣기는 부담스러울거 같고 글 안에 공지에 활용하면 좋겠네요.
    그리고 스킨이 완성에 가까워진거 같아요. 처음엔 좀 투박해 보였는데..
  • BlogIcon MrZZang 2017.02.11 12:41 신고
    네 ^^
    지금도 그렇지만 지금 제가 사용중인 스킨은 테스트와 적용 위주로 하는거라 ㅎㅎ
    디자인은 좀 별로죠 ㅎㅎ