0
내 웹 사이트에 배치 할 RSS 피드를 만들고 있습니다. 나는 JS/jQuery에 관해서는 꽤 초보자이다. 그래서 어떤 도움이라도 대단히 감사한다.내 RSS 피드에 자동 스크롤을 추가하고 싶습니다.
Google의 피드 API를 발견했으며 자체 RSS 리더 위젯을 만들었지 만 다음에 추가 할 자동 스크롤 기능이 없습니다. vTicker 및 this one on jsfiddle.net from another stackoverflow question과 같은 자동 스크롤러의 몇 가지 예를 발견했지만 내 코드에서 작동하도록 적응하는 방법을 알아낼 수 없습니다. 이와 비슷한 것을 만드는 방법을 설명하는 튜토리얼이 있습니까?
내 RSS 피드는 DIV 컨테이너를 만든 다음 각 피드 항목의 제목, 설명 및 날짜가있는 하위 DIV를 컨테이너에 추가하여 작성되므로 DIV 컨테이너를 스크롤하는 것이 "모두"라고 생각합니다. ?
편집 : 기본적으로 컨테이너 바닥을 세로로 아래쪽으로 내려서 바닥에 도달 할 때까지 맨 뒤쪽으로 '다시 감싸고'싶습니다.
<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>
당신 함께 일하는 것이 도움이 될 것입니다. – Danny
HTML 코드가 추가되었습니다. – user2047537