私は自分のウェブサイトに配置するRSSフィードを作成しています。JS / jQueryに関しては、私はほとんど初心者なので、どんな助けでも大歓迎です。
GoogleのFeedAPIを見つけて、独自のRSSリーダーウィジェットを作成しましたが、次に追加したい自動スクロール機能がありません。別のstackoverflowの質問から、jsfiddle.netでvTickerやこれのような自動スクローラーの例をいくつか見つけましたが、コードに合わせてそれらを適応させる方法がわからないようです。このようなものを構築する方法を説明するチュートリアルはありますか？
私のRSSフィードは、DIVコンテナを作成し、各フィードエントリのタイトル、説明、日付を含む子DIVをコンテナに追加することで作成されます。したがって、DIVコンテナをスクロールするだけで、「すべて」を実行できると思います。
編集：基本的には、コンテナdivを一番下に到達するまで垂直に下げてから、再び一番上に「ラップアラウンド」したいと思います。
これはこれまでの私のHTML/CSS/JSです。
<head>
<title>Google Feed Loader Example #1</title>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript">
google.load("feeds", "1");
// Our callback function, for when a feed is loaded.
function feedLoaded(result) {
if (!result.error) {
// Grab the container we will put the results into
var container = document.getElementById("feed");
container.innerHTML = '';
// Loop through the feeds, putting the titles onto the page.
// Check out the result object for a list of properties returned in each entry.
// http://code.google.com/apis/ajaxfeeds/documentation/reference.html#JSON
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
var div1 = document.createElement("div");
div1.setAttribute("id", "title");
div1.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
//div1.appendChild(document.createTextNode(entry.feedUrl));
var div2 = document.createElement("div");
div2.setAttribute("id", "description");
div2.appendChild(document.createTextNode(entry.content));
var div3 = document.createElement("div");
div3.appendChild(document.createTextNode(entry.publishedDate));
div3.setAttribute("id", "date");
container.appendChild(div1);
container.appendChild(div2);
container.appendChild(div3);
/*var li = document.createElement("li");
li.innerHTML = '<h3><a href="' + entry.link + '">' + entry.title + '</a></h3>';
li.innerHTML += '<p>' + entry.contentSnippet + '</p>';
container.appendChild(li);*/
}
}
}
function OnLoad() {
// Create a feed instance that will grab Digg's feed.
var feed = new google.feeds.Feed("http://fastpshb.appspot.com/feed/1/fastpshb");
feed.setNumEntries(15);
feed.includeHistoricalEntries();
// Calling load sends the request off. It requires a callback function.
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>
<style>
h1 {
background-color: #356AA0;
}
a {
color: #FEC659;
}
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
div {line-height: 1;}
/*h1, p {margin: 0;} */
div#feed {
width: 330;
height: 150;
overflow-y: auto;
background-color: #F8F8F8; /* background-color when image is not shown */
border-top: 1px solid #C0C0C0;
border-bottom: 1px solid #C0C0C0; /* set grey border bottom */
border-left: 1px solid #C0C0C0; /* set grey border left */
border-right: 1px solid #C0C0C0; /* set grey border right */
}
div#title {
/*padding: 5px;*/
background-color: #FFFFFF;
font-size: 14px; /* sets the font size of the title to 18px*/
font-weight: bold; /* and bold of course */
color: #FEC659;
text-decoration: none;
}
div#description {
color: #356AA0;
background-color: #FFFFFF;
padding-bottom: 5px;
}
div#date {
background-color: #FFFFFF;
color: #000000;
border-bottom: 1px dotted #C0C0C0;
padding-bottom: 5px;
}
div#header {
width: 330;
background-color: #356AA0;
font-size: 18px; /* sets the font size of the title to 18px*/
font-weight: bold; /* and bold of course */
color: #FFFFFF;
text-decoration: none;
}
</style>
</head>
<body>
<div id="header">RSS Feed </div>
<div id="feed"></div>
</body>
</html>