https://yusata.com/js/vscroller.js

1(function ($) {
2    $.fn.extend({
3        vscroller: function (options) {
4            var settings = $.extend({ speed: 1000, stay: 2000, newsfeed: '', cache: true }, options);
5
6            return this.each(function () {
7                var interval = null;
8                var mouseIn = false;
9                var totalElements;
10                var isScrolling = false;
11                var h;
12                var t;
13                var wrapper = $(this).addClass('news-wrapper');
14                if (settings.newsfeed == '') { alert('No XML file specified'); return; }
15                $.ajax({
16                    url: settings.newsfeed,
17                    type: 'GET',
18                    dataType: 'xml',
19                    cache: settings.cache,
20                    success: function (xml) {
21                        //if there are news headlines then build the html
22                        var contentWrapper = $('<div/>').addClass('news-contents-wrapper');
23                        var newsHeader = $('<div/>').addClass('news-header');
24                        var newsContents = $('<div/>').addClass('news-contents');
25                        wrapper.append(contentWrapper);
26                        contentWrapper.append(newsHeader);
27                        contentWrapper.append(newsContents);
28                        newsHeader.html($(xml).find('newslist').attr('title'));
29                        var i = 0;
30                        totalElements = $(xml).find('news').length;
31                        $(xml).find('news').each(function () {
32                            var news = $('<div/>').addClass('news');
33                            newsContents.append(news);
34                            var history = $('<div/>').addClass('history');
35                            var description = $('<div/>').addClass('description');
36                            news.append(history);
37                            news.append(description);
38                            history.append(getCircle($(this).attr('category'), $(this).attr('date')));
39                            var url = $(this).attr('url');
40                            var htext = $(this).find('headline').text();
41                            description.append($('<h1/>').html("<a href='" + url + "'>" + htext + "</a>"));
42                            var newsText = $(this).find('detail').text();
43                            if (newsText.length > 80) {
44                                newsText = newsText.substr(0, 80) + "...";
45                            }
46                            description.append($('<div/>').addClass('detail').html(newsText));
47                        });
48                        h = parseFloat($('.news:eq(0)').outerHeight());
49                        $('.news', wrapper).each(function () {
50                            $(this).css({ top: i++ * h });
51                        });
52                        t = (totalElements - 1) * h;
53                        newsContents.mouseenter(function () {
54                            mouseIn = true;
55                            if (!isScrolling) {
56                                $('.news').stop(true, false);
57                                clearTimeout(interval);
58                            }
59                        });
60                        newsContents.mouseleave(function () {
61                            mouseIn = false;
62                            interval = setTimeout(scroll, settings.stay);
63                        });
64                        interval = setTimeout(scroll, 1);
65                    }
66                });
67                //$.get(settings.newsfeed, );
68                function scroll() {
69                    if (!mouseIn && !isScrolling) {
70                        isScrolling = true;
71                        $('.news:eq(0)').stop(true, false).animate({ top: -h }, settings.speed, function () {
72
73                            clearTimeout(interval);
74                            var current = $('.news:eq(0)').clone(true);
75                            current.css({ top: t });
76                            $('.news-contents').append(current);
77                            $('.news:eq(0)').remove();
78                            isScrolling = false;
79                            interval = setTimeout(scroll, settings.stay);
80
81                        });
82                        $('.news:gt(0)').stop(true, false).animate({ top: '-=' + h }, settings.speed);
83                    }
84                }
85                function getCircle(category, date) {
86                    date = date.replace(/-/g, '/');
87                    var d = new Date(date);
88                    var day = '';

89                    var month = '';
90                    switch (d.getDate()) {
91                        case 1:
92                        case 21:
93                            day = d.getDate() + ' st';
94                            break;
95                        case 2:
96                        case 22:
97                            day = d.getDate() + 'nd';
98                            break;
99                        case 3:
100                        case 23:
101                            day = d.getDate() + 'rd';
102                            break;
103                        default:
104                            day = d.getDate() + 'th';
105                            break;
106                    }
107                    switch (d.getMonth()) {
108                        case 0:
109                            month = 'JAN';
110                            break;
111                        case 1:
112                            month = 'FEB';
113                            break;
114                        case 2:
115                            month = 'MAR';
116                            break;
117                        case 3:
118                            month = 'APR';
119                            break;
120                        case 4:
121                            month = 'MAY';
122                            break;
123                        case 5:
124                            month = 'JUN';
125                            break;
126                        case 6:
127                            month = 'JUL';
128                            break;
129                        case 7:
130                            month = 'AUG';
131                            break;
132                        case 8:
133                            month = 'SEP';
134                            break;
135                        case 9:
136                            month = 'OCT';
137                            break;
138                        case 10:
139                            month = 'NOV';
140                            break;
141                        case 11:
142                            month = 'DEC';
143                            break;
144
145                    }
146                    return $('<div/>').addClass('circle-outer').append($('<div/>').addClass('circle').addClass(category)
147                                                                                                                .append($('<span/>').addClass('day').html(day))
148                                                                                                                .append($('<span/>').html('...').addClass('elipses'))
149                                                                                                                .append($('<span/>').addClass('month').html(month)));
150                }
151
152            });
153        }
154    });
155})(jQuery);