RSSフィード(XML形式)を読み込んでテキストスクロール表示。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta http-equiv="Content-Language" content="ja" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <meta http-equiv="imagetoolbar" content="no" /> <title>jCarousel | 設置サンプル | テキストスクロール</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js" ></script> <script type="text/javascript" src="/content/lib/jcarousel/lib/jquery.jcarousel.pack.js"></script><!-- jCarousel library --> <link href="/content/lib/global.css" rel="stylesheet" type="text/css" /> <link rel="stylesheet" type="text/css" href="/content/lib/jcarousel/lib/jquery.jcarousel.css" /><!-- jCarousel core stylesheet --> <style type="text/css"> .jcarousel-container-vertical { width: 300px; height: 300px; background: #e8e8e8; border: 1px solid #fff; } .jcarousel-clip-vertical { top: 15px; width: 290px; height: 270px; margin: 0 5px; z-index: 20; } .jcarousel-item, .jcarousel-item-placeholder { width: 270px; height: auto; margin: 5px 0; } .jcarousel-item h3, .jcarousel-item p { margin: 0; font-size: 90%; } .jcarousel-next-vertical { position: absolute; bottom: 0; left: 0; width: 300px; height: 14px; cursor: pointer; border-top: 1px solid #fff; background: #4088b8 url(lib/jcarousel/images/arrow-down.gif) no-repeat center; } .jcarousel-next-disabled-vertical { cursor: default; opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50); } .jcarousel-prev-vertical { position: absolute; top: 0; left: 0; width: 300px; height: 14px; cursor: pointer; border-bottom: 1px solid #fff; background: #4088b8 url(lib/jcarousel/images/arrow-up.gif) no-repeat center; } .jcarousel-prev-disabled-vertical { cursor: default; opacity: .5; -moz-opacity: .5; filter: alpha(opacity=50); } .loading { background: transparent url(lib/jcarousel/images/loading.gif) 50% 50% no-repeat; } </style> <script type="text/javascript"> function mycarousel_initCallback(carousel, state){ // Lock until all items are loaded. That prevents jCarousel from // setup correctly and we have to do that in the ajax callback // function with carousel.setup(). // We're doing that because we don't know the exact height of each // items until they are added to the list. carousel.lock(); jQuery.get( '/content/lib/jcarousel/special_textscroller.php', { 'feed': 'http://weblogs.macromedia.com/labs/index.xml' }, function(xml) { mycarousel_itemAddCallback(carousel, xml); }, 'xml' ); }; function mycarousel_itemAddCallback(carousel, xml){ var $items = jQuery('item', xml); $items.each(function(i) { carousel.add(i + 1, mycarousel_getItemHTML(this)); }); carousel.size($items.size()); // Unlock and setup. carousel.unlock(); carousel.setup(); }; /** * Item html creation helper. */ function mycarousel_getItemHTML(item){ return '<h3><a href="'+$('link', item).text()+'">'+$('title', item).text()+'</a></h3><p>'+mycarousel_truncate($('description', item).text(), 90)+'</p>'; }; /** * Utility function for truncating a string without breaking words. */ function mycarousel_truncate(str, length, suffix) { if (str.length <= length) { return str; } if (suffix == undefined) { suffix = '...'; } return str.substr(0, length).replace(/\s+?(\S+)?$/g, '') + suffix; }; jQuery(document).ready(function() { /** * We show a simple loading indicator * using the jQuery ajax events */ jQuery().ajaxStart(function() { jQuery(".jcarousel-clip-vertical").addClass('loading'); }); jQuery().ajaxStop(function() { jQuery(".jcarousel-clip-vertical").removeClass('loading'); }); jQuery('#mycarousel').jcarousel({ vertical: true, size: 0, initCallback: mycarousel_initCallback }); }); </script> <link rel="stylesheet" type="text/css" href="/common/css/example.css"></head> <body id='example3' class='example'><div class="ads" style="margin:32px auto;text-align:center;"></div><h1 class='h'><a href='/'>PHP & JavaScript Room</a> :: 設置サンプル</h1> <h2 class='h'>jCarousel v 0.2.2 テキストスクロールの設置サンプル</h2> <h3 class='h'>実行結果</h3> <h1><a href="http://sorgalla.com/projects/jcarousel/">jCarousel</a> | 設置サンプル | テキストスクロール</h1> <p>RSSフィード(XML形式)を読み込んでテキストスクロール表示。</p> <h2>Adobe Lab : RSS Feed (RSS 2.0)</h2> <div id="mycarousel"> <ul> <!-- The content will be dynamically loaded in here --> </ul> </div> </body> </html>