Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>CBE Newsticker (simple example)</title>
<style type='text/css'><!--
body {
color:#000000; background:#ccccff;
margin:0px; padding:0px;
}
.newsTicker {
position:absolute; visibility:hidden; overflow:hidden;
width:500px; height:22px; clip:rect(0,500px,22px,0);
color:#000000; margin:0px; padding:0px;
border-top:1px solid #000000; border-left:1px solid #000000;
border-bottom:1px solid #ffffff; border-right:1px solid #ffffff;
}
.newsTickerContent {
position:absolute; visibility:hidden; overflow:hidden;
margin:0px; padding:4px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#0000ff; background:transparent;
}
.tMarker {
display:inline;
position:relative; visibility:hidden;
width:1em; height:1em; left:0px; top:0px;
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#000000; background:transparent;
}
.note {
position:absolute; visibility:hidden;
width:500px; height:300px; clip:rect(0,500px,300px,0);
font-family:verdana,arial,helvetica,sans-serif;
font-size:12px; color:#000000; background:#cccccc; margin:0px; padding:10px;
border-top:1px solid #000000; border-left:1px solid #000000;
border-bottom:1px solid #ffffff; border-right:1px solid #ffffff;
}
a:link, a:visited, a:active { font-family:verdana,arial,sans-serif; font-size:12px; color:#880000; }
a:hover { font-family:verdana,arial,sans-serif; font-size:12px; color:#000088; }
--></style>
<script type='text/javascript' src='../cbe_core.js'></script>
<script type='text/javascript' src='../cbe_event.js'></script>
<script type='text/javascript' src='../cbe_slide.js'></script>
<script type='text/javascript'><!--
var
t1,
tickerMarkerTotal = 11,
tickerSlideTime = 1000,
tickerPauseTime = 4000,
tickerMarker;
function windowOnload() {
tickerMarker = 1;
with (cbeGetElementById('n1').cbe) {
background('#cccccc');
resizeTo(500,300);
moveTo('n',75);
zIndex(10);
show();
}
with (t1 = cbeGetElementById('tickerContainer1').cbe) {
background('#cccccc');
resizeTo(500,22);
moveTo('center'); //******* moveTo(document.cbe.width()/2,document.cbe.height()/2');
show();
}
with (t1.firstChild) {
background('#cccccc');
moveTo(0, parentNode.height());
show();
// use the rate-type you like:
// slideRate = cbeSlideRateLinear;
slideRate = cbeSlideRateSine;
// slideRate = cbeSlideRateCosine;
addEventListener('slideEnd', tickerControl);
}
tickerControl(t1.firstChild, 1);
}
function tickerControl(tContent, slide) {
if (slide) {
if (tickerMarker > tickerMarkerTotal) {
tickerMarker = 1;
tContent.moveTo(0, tContent.parentNode.height());
}
var marker = cbeGetElementById('m' + tickerMarker).cbe;
tContent.slideTo(0, -marker.offsetTop(), tickerSlideTime);
++tickerMarker;
}
else setTimeout("tickerControl(t1.firstChild, 1)", tickerPauseTime);
}
//--></script>
</head>
<body marginwidth='0' marginheight='0'>
<div id="n1" class="note">
<h3>CBE News-Ticker</h3>
<p>This <a href="http://cross-browser.com/">CBE</a> example was in response to Frode's idea at the forum. We welcome your feedback at the <a href="http://www.helpfromtechs.com/ubb/ultimatebb.php?ubb=get_topic;f=8;t=000497">discussion</a>.</p>
<p>I improved it quite a bit in response to the <a href="http://www.helpfromtechs.com/ubb/ultimatebb.php?ubb=get_topic;f=8;t=000512">discussion</a> with RJA.</p>
<p><i>17 May 02</i>: I tested this on Win2K with IE5.01, Mozilla0.9.7, Opera6.01, and Navigator4.79. Opera and NN4 don't render the borders.</p>
<p><a href="http://mfoster.com/">Mike Foster</a></p>
</div>
<div id='tickerContainer1' class='newsTicker'>
<div id='tickerContent1' class='newsTickerContent'>
<p><span id="m1" class="tMarker">></span><a href="http://cross-browser.com/">Cross-Browser.com</a> - Home of CBE, my cross-browser dhtml library.</p>
<p><span id="m2" class="tMarker">></span><a href="http://lineoflight.com/">LineOfLight.com</a> - My first site.</p>
<p><span id="m3" class="tMarker">></span><a href="http://electcolene.com/">ElectColene.com</a> - Colene is running for a local office.</p>
<p><span id="m4" class="tMarker">></span><a href="#" onclick="return false">SardisCity.com</a> - My home town. (not yet live)</p>
<p><span id="m5" class="tMarker">></span><a href="http://lineoflight.com/fe/">Foster Electronics</a> - My Dad's communications business.</p>
<p><span id="m6" class="tMarker">></span><a href="http://mitchellfoster.com/">MitchellFoster.com</a> - My Brother's site.</p>
<p><span id="m7" class="tMarker">></span><a href="http://cross-browser.com/ss/solar_system2.html">Inner Solar System</a> - The inner planets orbiting the Sun.</p>
<p><span id="m8" class="tMarker">></span><a href="http://cross-browser.com/ss/solar_system.html">Sun Earth Moon</a> - More astronomy fun.</p>
<p><span id="m9" class="tMarker">></span><a href="http://lineoflight.com/w3a/">Mike's W3A</a> - My original cross-browser dhtml work.</p>
<p><span id="m10" class="tMarker">></span><a href="http://lineoflight.com/mt/">GogetaMT</a> - My Son's first site.</p>
<p><span id="m11" class="tMarker">></span><a href="http://lineoflight.com/reflekted/">Reflekted</a> - One of my first dhtml applications.</p>
</div>
</div>
</body>
</html>
Die Templates findest du auf der Hauptseite zum Runterladen.
Zitieren
Lesezeichen