Question

我正在构建一个放在我网站上的RSS源。对于JS / jQuery来说，我几乎是一个新手，所以非常感谢任何帮助。

我找到了谷歌的Feed API，我创建了自己的RSS阅读器小工具，但它没有任何自动滚动功能，这是我想要添加的功能。我找到了一些自动滚动条的示例，例如vTicker和this one on jsfiddle.net from another stackoverflow question，但我似乎无法弄清楚如何使它们适合我的代码。是否有任何教程描述如何构建这样的东西？

我的RSS源是通过创建一个DIV容器，然后将子DIV附加到容器上，并为每个Feed条目添加标题，描述和日期来构建的，所以我想我需要做的“全部”是滚动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>

Answer 1

以下是使用vTicker的示例，因为您已将其链接起来。我尝试对上面的原始代码进行尽可能少的更改。

<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" src="http://www.jugbit.com/jquery/jquery.vticker-min.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 = '';
            //create a list container for vTicker
    var list = document.createElement("ul");
    container.appendChild(list);
    // 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];
              //new list item
      var listItem = document.createElement("li");
      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");
              //add all child divs to list item
      listItem.appendChild(div1);
      listItem.appendChild(div2);
      listItem.appendChild(div3);
              //add list item to the list container
      list.appendChild(listItem);
      /*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);*/
    }
            //add the list container to the containing div
    container.appendChild(list);
    $(container).vTicker({ 
        speed: 500,
        pause: 3000,
        animation: 'fade',
        mousePause: false,
        showItems: 3
    });
  }
}

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>

Answer 2

由于Google放弃了我的NEWSSHOW供稿，我决定尝试修改上面的代码（Danny）以制作简化的信用卡大小的Google新闻自动收录器。大多数更改只是消除了不必要的东西并进行了重大的CSS更改。（对于搞砸的HTML缩进感到抱歉，这是我第一次在stackoverflow上发帖。）

测试网址：

http://m.gooplusplus.com/gnews360.html?b#Business-News

http://m.gooplusplus.com/gnews-hl.html?b#Business-News

<head>
<title>Google News RSS scroller - param: ?b#Business - News</title> 
<base target = "_blank" />

<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" src="http://www.jugbit.com/jquery/jquery.vticker-min.js"></script>
<script type="text/javascript">
google.load("feeds", "1");

function feedLoaded(result) {
if (!result.error) {
var container = document.getElementById("feed");
container.innerHTML = '';
var list = document.createElement("ul");
container.appendChild(list);
for (var i = 0; i < result.feed.entries.length; i++) {
  var entry = result.feed.entries[i];
  var listItem = document.createElement("li");
  var div1 = document.createElement("div");
  div1.setAttribute("id", "title");
  div1.innerHTML = "<center style='background-color:#F0F0F0;padding-left:105px;color:#888888;font-size:0.9em;'>--&#160;"+
       location.hash.substr(1) + "&#160;--&#160;&#160;</center>"+ entry.content;

  listItem.appendChild(div1);
  list.appendChild(listItem);
}
container.appendChild(list);
$(container).vTicker({ 
    speed: 150,
    pause: 4000,
    animation: 'fade',
    mousePause: true,
    showItems: 1
});
}
}

function OnLoad() {
var feed = new google.feeds.Feed("http://news.google.com/news/?output=rss&topic="+location.search.substr(1)); 
feed.setNumEntries(15);
feed.includeHistoricalEntries();
feed.load(feedLoaded);
}
google.setOnLoadCallback(OnLoad);
</script>

<style>
body, table { margin:0px; }
center { text-align:left; }
td { font-size:0.8em; text-align:justify; }
font { font-size:1em; }
img { margin-top:-12px; border:2px solid #CCCCCC; }
a:hover img { border:2px solid red; }
td font div { margin-top:-15px; }
td font div img { display:none; }

a:link,a:visited {  font-size:0px; text-decoration: none; }

div {line-height: 1;}
div a b { color: blue; font-size:11px; }
div a:hover b { color: red; }

div#title { background-color:   #FFFFFF; }

div#feed { 
width:              100%;
max-width:          360px;
height:             auto;
overflow-y:         auto;
background-color:   #F0F0F0; 
border:             1px solid #C0C0C0;
}
</style>
</head>
<body><div id="feed"></div></body>
</html>

我想在我的RSS Feed中添加自动滚动功能

2 个答案: