0
我正在建立一個RSS源放置在我的網站上。當談到JS/jQuery時，我幾乎是一個新手，因此非常感謝任何幫助。我想添加自動滾動到我的RSS源
我發現了Google的Feed API，並且創建了自己的RSS閱讀器Widget，但它沒有任何自動滾動功能，這就是我想要添加的內容。我發現一些自動滾屏的例子，如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的一個例子，你正在合作會有所幫助。 – Danny 2013-03-05 16:35:17
已添加HTML代碼。 – user2047537 2013-03-05 16:59:53