嗯,这很有趣....不!;)
我不得不稍微改变售票员的工作方式,因为我不知道如何按原样更新它。你现在有一个简单的函数tickerUpdateItems
,你只需传递一个项目数组,它就会更新。
这是新的来源......
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS-Ticker</title>
<style> <!--
BODY, P, SPAN, DIV, TABLE, TD, TH, UL, OL, LI {
font-family: Arial, Helvetica;
font-size: 14px;
color: black;
}
.code {
font-family: Courier New, Monospace;
font-size: 12px;
margin: 10px;
padding: 0px;
color: blue;
}
--> </style>
<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
//THIS IS MY HORIZONTAL SCROLLING. RSS TO JAVASCRIPT CODE IS AT THE END OF IT!!!!!
var tickerEntries = new Array(
"Hello!",
"Use this script to create a news ticker.",
"You can also use <b>HTML tags</b>.",
"The quick brown fox jumps over the lazy dog."
);
//---------------------------------------------------------------------------------------------------------
// Configuration
//---------------------------------------------------------------------------------------------------------
var tickerWidth = 400; // width (pixels)
var tickerMargin = 20; // margin (pixels)
var tickerDelay = 30; // scrolling delay (smaller = faster)
var tickerSpacer = "+++"; // spacer between ticker entries
var tickerBGColor = "#E0F0FF"; // background color
var tickerHLColor = "#FFF0E0"; // hilight (mouse over) color
var tickerFont = "Courier New, Courier, Monospace"; // font family (CSS-spec)
var tickerFontSize = 16; // font size (pixels)
var tickerFontColor = "blue"; // font color
var tickerBorderWidth = 2; // border width (pixels)
var tickerBorderStyle = "groove"; // border style (CSS-spec)
var tickerBorderColor = "#FFFFFF"; // border color
//---------------------------------------------------------------------------------------------------------
// Functions
//---------------------------------------------------------------------------------------------------------
var DOM = document.getElementById;
var IE4 = document.all;
var tickerIV, tickerID;
var tickerItems = new Array();
var tickerHeight = tickerFontSize + 8;
function tickerGetObj(id) {
if(DOM) return document.getElementById(id);
else if(IE4) return document.all[id];
else return false;
}
function tickerObject(id) {
this.elem = tickerGetObj(id);
this.width = this.elem.offsetWidth;
this.x = tickerWidth;
this.css = this.elem.style;
this.css.width = this.width + 'px';
this.css.left = this.x + 'px';
this.move = false;
return this;
}
function tickerNext() {
if(!DOM && !IE4) return;
var obj = tickerItems[tickerID];
if(obj) {
obj.x = tickerWidth;
obj.css.left = tickerWidth + 'px';
obj.move = true;
}
}
function tickerMove() {
if(!DOM && !IE4) return;
for(var i = 0; i < tickerItems.length; i++) {
if(tickerItems[i].move) {
if(tickerItems[i].x > -tickerItems[i].width) {
tickerItems[i].x -= 2;
tickerItems[i].css.left = tickerItems[i].x + 'px';
}
else tickerItems[i].move = false;
}
}
if(tickerItems.length == 1) {
if(tickerItems[tickerID].x + tickerItems[tickerID].width <= 0) {
tickerNext();
}
}
else if(tickerItems[tickerID].x + tickerItems[tickerID].width <= tickerWidth) {
tickerID++;
if(tickerID >= tickerItems.length) tickerID = 0;
tickerNext();
}
}
function tickerStart(init) {
if(!DOM && !IE4) return;
if(tickerBGColor) {
var obj = tickerGetObj('divTicker');
obj.style.backgroundColor = tickerBGColor;
}
if(init) {
tickerID = 0;
tickerNext();
}
if (tickerIV) clearInterval(tickerIV);
tickerIV = setInterval('tickerMove()', tickerDelay);
}
function tickerStop() {
if(!DOM && !IE4) return;
clearInterval(tickerIV);
if(tickerHLColor) {
var obj = tickerGetObj('divTicker');
obj.style.backgroundColor = tickerHLColor;
}
}
function tickerInit() {
if(!DOM && !IE4) return;
var obj = tickerGetObj('divTicker');
obj.style.width = tickerWidth + 'px';
obj.style.visibility = 'visible';
//tickerStart(true);
tickerUpdateItems(tickerEntries);
}
function tickerReload() {
if(!DOM && !IE4) return;
document.location.reload();
}
//window.onresize = tickerReload;
window.onload = tickerInit;
//---------------------------------------------------------------------------------------------------------
// Build ticker
//---------------------------------------------------------------------------------------------------------
document.write(
'<style> ' +
'#divTicker { ' +
'position: absolute; ' +
'width: 10000px; ' +
'height: ' + tickerHeight + 'px; ' +
'cursor: default; ' +
'overflow: hidden; ' +
'visibility: hidden; ' +
(tickerBorderWidth ? 'border-width: ' + tickerBorderWidth + 'px; ' : '') +
(tickerBorderStyle ? 'border-style: ' + tickerBorderStyle + '; ' : '') +
(tickerBorderColor ? 'border-color: ' + tickerBorderColor + '; ' : '') +
'} ' +
'.cssTickerContainer { ' +
'position: relative; ' +
'height: ' + tickerHeight + 'px; ' +
'margin-top: ' + tickerMargin + 'px; ' +
'margin-bottom: ' + tickerMargin + 'px; ' +
'} ' +
'.cssTickerEntry { ' +
'position:absolute;top:2px; white-space:nowrap;'+
'font-family: ' + tickerFont + '; ' +
'font-size: ' + tickerFontSize + 'px; ' +
'color: ' + tickerFontColor + '; ' +
'} ' +
'</style>'
);
function tickerUpdateItems(items) {
var ticker = document.getElementById('divTicker');
ticker.innerHTML = '';
if (items.length > 0) {
for (var i = 0; i < items.length; i++) {
var tickerItem = document.createElement('DIV');
tickerItem.id = 'divTickerEntry' + (i + 1);
tickerItem.className = 'cssTickerEntry';
tickerItem.innerHTML =' ' + items[i] +' ' +tickerSpacer;
ticker.appendChild(tickerItem);
}
}
tickerItems=[];
for (var i = 0; i < items.length; i++) {
tickerItems[i] = new tickerObject('divTickerEntry' + (i + 1));
}
tickerStart(true);
}
/*document.write(
'<div class="cssTickerContainer">' +
'<div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()">'
);
for(var i = 0; i < tickerEntries.length; i++) {
document.write(
'<div id="divTickerEntry' + (i+1) + '" class="cssTickerEntry" ' +
'style="position:absolute; top:2px; white-space:nowrap">' +
tickerEntries[i] + ((tickerEntries.length > 1) ? ' ' + tickerSpacer + ' ' : '') +
'</div>'
);
}
//END OF HORIZONTAL SCROLLER
//---------------------------------------------------------------------------------------------------------
// THIS IS WHERE I TRANSFORM RSS TO JAVASCRIPT!!!!!!!!!!!!!!!!!!!!!!!
document.write('</div></div>');*/
google.load("feeds", "1");
function initialize() {
var feed = new google.feeds.Feed("http://www.ntvmsnbc.com/id/24927681/device/rss/rss.xml");
feed.setNumEntries(6);
feed.load(function(result) {
if (!result.error) {
var titles=[];
var container = document.getElementById("feed");
var html = '';
for (var i = 0; i < result.feed.entries.length; i++) {
var entry = result.feed.entries[i];
titles.push(entry.title);
html += '<p>' + entry.publishedDate + ' ' + entry.title;
}
container.innerHTML = html;
tickerUpdateItems(titles);
}
});
}
google.setOnLoadCallback(initialize);
// END OF RSS TO JAVASCRIPT
</script>
</head>
<body>
<div class="cssTickerContainer"><div id="divTicker" onMouseOver="tickerStop()" onMouseOut="tickerStart()"></div></div>
<div id="feed"></div>
</body>
</html>
....希望它对你有帮助 :)