【发布时间】：2013-05-24 12:45:41
【问题描述】：
我正在构建一个 RSS 提要以放置在我的网站上。在 JS/jQuery 方面，我几乎是个新手，因此非常感谢任何帮助。
我找到了 Google 的 Feed API 并创建了自己的 RSS 阅读器小部件，但它没有任何自动滚动功能，这是我接下来要添加的功能。我发现了一些自动滚动条的示例，例如vTicker 和this one on jsfiddle.net from another stackoverflow question，但我似乎无法弄清楚如何使它们适用于我的代码。是否有任何教程描述了如何构建这样的东西？
我的 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>
【问题讨论】：
-
发布您正在使用的 html 示例会有所帮助。
标签： javascript jquery html rss