<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<style type="text/css">
/*<![CDATA[*/
#roll {
position:absolute;left:100px;top:100px;width:276px;height:270px;border:solid red 1px;
}
.letter {
position:relative;width:30px;height:30px;border:solid red 1px;float:left;margin-Left:2px;margin-Top:2px;font-Size:18px;text-Align:center;background-Image:url(alphabet.png);background-Position:-780px 0px;
}
.letterline {
position:absolute;top:10px;left:0px;width:20px;height:1px;background-Color:#000000;
}
#roll2 {
position:absolute;left:400px;top:100px;width:276px;height:270px;border:solid red 1px;
}
.letter2 {
position:relative;width:20px;height:20px;border:solid red 1px;float:left;margin-Left:2px;margin-Top:2px;font-Size:18px;text-Align:center;background-Color:#FFFFCC;
}
/*]]>*/
</style></head>
<body>
<input type="button" name="" value="Re-Start" onmouseup="zxcTextRoll.start('roll');" />
<input type="button" name="" value="New Text" onmouseup="zxcTextRoll.start('roll',[27,28,29,30]);" />
<input type="button" name="" value="Re-Start" onmouseup="zxcTextRoll.start('roll2',null,100,4000);" />
<input type="button" name="" value="New Text" onmouseup="zxcTextRoll.start('roll2','123');" />
<div id="roll" >
</div>
<div id="roll2" >
</div>
<script type="text/javascript">
/*<![CDATA[*/
// Text Roll (07-June-2012)
// by Vic Phillips
var zxcTextRoll={
init:function(o){
var p=document.getElementById(o.ID),char=o.Charactors,d=o.Display,bg=o.BackGroundImage,nu=o.MaximumLetters,cls=o.LetterClass,mde=typeof(d)=='string'&&typeof(char)=='string'?'txt':typeof(d)=='object'&&d.constructor==Array&&typeof(bg)=='string'&&typeof(nu)=='number'?'img':false,ms=o.RollSpeed,ms=typeof(ms)=='number'?ms:500,hold=o.RollDuration,hold=typeof(hold)=='number'?hold:10000,ary=[],c,h,w,obj,z0=0;
if (mde&&p&&typeof(cls)=='string'){
for (;z0<d.length;z0++){
ary[z0]=[document.createElement('DIV'),mde=='img'?d[z0]:d.charAt(z0)];
p.appendChild(ary[z0][0]);
ary[z0][0].className=cls;
h=parseInt(this.css(ary[z0][0],'height'))/2;
w=parseInt(this.css(ary[z0][0],'width'));
c=document.createElement('DIV');
ary[z0][0].appendChild(c);
c.style.position='absolute';
c.style.left='0px';
c.style.top='0px';
c.style.width=w+'px';
c.style.height=h*2+'px';
c.style.clip='rect(0px,100px,'+h+'px,0px)';
if (mde=='img'){
c.style.backgroundImage='url('+bg+')';
c.style.backgroundRepeat='no-repeat';
c.style.backgroundPosition=-Math.floor(Math.random()*nu)*w+'px 0px';
}
else {
c.innerHTML=char.charAt(Math.floor(Math.random()*char.length));
}
c=c.cloneNode(true);
ary[z0][0].appendChild(c);
c.style.clip='rect('+h+'px,100px,100px,0px)';
if (mde=='img'){
c.style.backgroundPosition=-Math.floor(Math.random()*nu)*w+'px 0px';
}
else {
c.innerHTML=char.charAt(Math.floor(Math.random()*char.length));
}
c=document.createElement('DIV');
c.className=o.LineClass;
ary[z0][0].appendChild(c);
}
zxcTextRoll['zxc'+o.ID]=obj={
mde:mde,
ary:ary,
nu:nu,
w:w,
char:char,
ms:ms,
hold:hold,
srt:new Date()
}
}
},
roll:function(o){
var oop=this,ary=o.ary,d,lgth=ary.length,run=new Date()-o.srt<o.hold,z0=0,z1;
for (;z0<o.ary.length;z0++){
d=o.ary[z0][0].getElementsByTagName('DIV')
for (z1=0;z1<2;z1++){
if (o.mde=='img'){
d[z1].style.backgroundPosition=-(run?Math.floor(Math.random()*o.nu):o.ary[z0][1])*o.w+'px 0px';
}
else {
d[z1].innerHTML=run?o.char.charAt(Math.floor(Math.random()*o.char.length)):o.ary[z0][1];
}
}
}
if (run){
o.to=setTimeout(function(){ oop.roll(o); },o.ms);
}
},
start:function(id,txt,ms,hold){
var o=zxcTextRoll['zxc'+id],z0=0;
if (o){
clearTimeout(o.to);
for (;z0<o.ary.length;z0++){
if (txt){
if (o.mde=='img'&&typeof(txt)=='object'&&txt.constructor==Array){
o.ary[z0][1]=typeof(txt[z0])=='number'?txt[z0]:-1;
}
else if (o.mde=='txt'&&typeof(txt)=='string'){
o.ary[z0][1]=txt.charAt(z0)||'';
}
}
}
o.srt=new Date();
o.ms=typeof(ms)=='number'?ms:o.ms;
o.hold=typeof(hold)=='number'?hold:o.hold;
this.roll(o);
}
},
css:function(o,p){
if (o.currentStyle){
return o.currentStyle[p.replace(/-/g,'')];
}
return document.defaultView.getComputedStyle(o,null).getPropertyValue(p.toLowerCase());
}
}
zxcTextRoll.init({
ID:'roll',
LetterClass:'letter',
Display:[
19,7,8,18,26,8,18,26,19,7,4,26,19,4,23,19
],
LineClass:'letterline',
MaximumLetters:30,
BackGroundImage:'alphabet.png',
RollSpeed:500,
RollDuration:10000
});
zxcTextRoll.start('roll');
zxcTextRoll.init({
ID:'roll2',
LetterClass:'letter2',
Charactors:'ABCDEFGHIJKLMNOPQRSTUVWXYZ ',
Display:'THIS IS THE TEXT',
LineClass:'letterline',
RollSpeed:500,
RollDuration:10000
});
zxcTextRoll.start('roll2');
/*]]>*/
</script>
</DIV>
</html>