フッターにRSS内容をスライド表示させられるJavaScript「Jquery Constant Footer」

フッターにwibiyaなどソーシャル要素を表示させるケースが増えています。
でもそんな高機能でなくてもいい。単純にRSSを表示させたいというかたにオススメです。
RSS内容をスライド表示させるJquery Constant Footerを紹介します。

使用方法

Jquery Constant Footerからjquery.constantfooter.jsを、jQueryからjquery.jsをダウロードします。


<script type="text/javascript" src="jquery-1.4.2.min.js"></script>	
<script type="text/javascript" src="jquery.constantfooter.js"></script>
<script type="text/javascript">
$(document).ready(function() {
	$("#id名").constantfooter({
		"feed": "RSSへのパス" //RSSは同ドメインかつRSS2.0形式
	});
});
</script>

上記を記述したら、idを書けば完成です。
<div id="id名"></div>
サンプルで使用しているデザインは以下のCSSとなります。


<style>
#footer {background-color: Black;color: White;font-size: small;	font-family: Arial, Helvetica, Sans-serif;}
#footer h2 {font-size: small;padding: 0.5em 0;margin: 0;}
#footer p {padding: 0;margin: 0;line-height: 1.5em;}
#footer a {color: Yellow;text-decoration: none;}
#footer .item {padding: 0.5em 1em;}
#footer .item div {margin: 0;padding: 0;}
#footer .description {height: 4.5em;overflow: hidden;padding: 0;margin: 0.2em;}
#footer .item div.link {padding-top: 0.5em;}
</style>

サンプル

Javascriptサンプルページ一覧

skuare.net