zRSSFeed04

API jQuery





☆★データーでの確認★☆

zRSSFeed




RSS Feeds Reader Plugin for jQuery - Zazar Online Website Builder


RSS feed with images and ticker animation


使用.jsファイル

【 外部読み込みファイル 】

《 1.7.1jquery.min 》

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript">
</script>

《 jquery.zrssfeed.min 》

<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>

《 jquery.vticker.js 》

<script src="jquery.vticker.js" type="text/javascript"></script>


ソースコード


ソースコード【 HTML 】

<!DOCTYPE html>
<html lang="ja">
<head>

<meta charset="utf-8">
<title>zRSSFeed - RSS feed with images and ticker animation</title>
<link href="example_ticker.css" rel="stylesheet" type="text/css">

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="jquery.zrssfeed.min.js" type="text/javascript"></script>
<script src="jquery.vticker.js" type="text/javascript"></script>

</head>
<body>

<h1>zRSSFeed - RSS feed with images and ticker animation</h1>

<h4>篠田 麻里子 Diary</h4>
<div id="ticker1" style="width:70%;"></div>

<script type="text/javascript">
$(document).ready(function () {
	$('#ticker1').rssfeed('http://blog.mariko-shinoda.net/index20.rdf',{
		snippet: false
	}, function(e) {
		$(e).find('div.rssBody').vTicker({
			showItems: 1
		});
	});
});
</script>
</body>
</html>

ソースコード【 CSS 】

《 jquery.zrssfeed.css 》

@charset "UTF-8";
/*
 * Example of RSS Ticker Styling
 *
 */

body {
	margin: 1em 3em;
	font-family: Tahoma, Genevam, sans-serif;
}

.rssFeed {
	font-family: Arial, Helvetica, sans-serif;
	font-size: small;
	width: 400px;
	margin-bottom: 2em;
}
.rssFeed a {
	color: #444;
	text-decoration: none;
}
.rssFeed a:hover {
	color: #000;
	text-decoration: underline;
}

.rssHeader { padding: 0.2em 0; }

.rssBody { border: 4px solid #666; }
.rssRow h4, .rssRow p, .rssRow div {
	margin: 0;
	padding: 0.5em;
}

#ticker1 .odd { background-color: #e8e8fc; }
#ticker1 .even { background-color: #d4d4e8; }

#ticker2 .odd { background-color: #e8fce8; }
#ticker2 .even { background-color: #d4e8d4; }


ブラウザで表示【 FireFox 】



IEtester【 IE7 】



IEtester【 IE8 】



IEtester【 IE9 】



ブラウザで表示【 Chrome 】



HTML5 Outliner【 Chrome 】