티스토리 뷰




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


MrZZang

최근에 올라온 글
최근에 달린 댓글
방문자수
  • Total :
  • Today :
  • Yesterday :

미스터짱의 일상,취미가 있는곳...