WebTechnologie - ukázkové skripty PHP, XHTML, JavaScript, CSS... (c) Scorpions.cz

HOME SKRIPTY

Animovaný ukazatel - Textový had
Normální položka
Zobrazeno: 13181

Popis: Za kurzorem Vám bude pobíhat textový had.
Funkčnost: Funkční v IE 5.5 a vyšší,
Hodnocení: ***
Ukázka


<STYLE type="text/css"> 
.spanstyle { 
position:absolute; 
visibility:visible; 
top:-50px; 
font-size:10pt; 
font-family:Verdana; 
font-weight:bold; 
color:red; 
} 
</STYLE> 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 
var x,y 
var step=20 
var flag=0 

// Svůj text dejte sem. Nezapomeňte mezeru na konci. 
var message="DYNAMIC DRIVE! " 
message=message.split("") 

var xpos=new Array() 
for (i=0;i<=message.length-1;i++) { 
xpos[i]=-50 
} 

var ypos=new Array() 
for (i=0;i<=message.length-1;i++) { 
ypos[i]=-50 
} 

function handlerMM(e){ 
x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX 
y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY 
flag=1 
} 

function makesnake() { 
if (flag==1 && document.all) { 
for (i=message.length-1; i>=1; i--) { 
xpos[i]=xpos[i-1]+step 
ypos[i]=ypos[i-1] 
} 
xpos[0]=x+step 
ypos[0]=y 

for (i=0; i<message.length-1; i++) { 
var thisspan = eval("span"+(i)+".style") 
thisspan.posLeft=xpos[i] 
thisspan.posTop=ypos[i] 
} 
} 

else if (flag==1 && document.layers) { 
for (i=message.length-1; i>=1; i--) { 
xpos[i]=xpos[i-1]+step 
ypos[i]=ypos[i-1] 
} 
xpos[0]=x+step 
ypos[0]=y 

for (i=0; i<message.length-1; i++) { 
var thisspan = eval("document.span"+i) 
thisspan.left=xpos[i] 
thisspan.top=ypos[i] 
} 
} 
var timer=setTimeout("makesnake()",30) 
} 
//--> 
</SCRIPT> 

Následující kód si vložte dovnitř tagu <BODY>.

<BODY onLoad="makesnake()" style="width:100%;overflow-x:hidden;overflow-y:scroll"> 

Následující kód si vložte mezi tagy <BODY> a </BODY>. 

<SCRIPT charset="windows-1250" type="text/javascript"> 
<!-- 
for (i=0;i<=message.length-1;i++) { 
document.write("<span id='span"+i+"' class='spanstyle'>") 
document.write(message[i]) 
document.write("</span>") 
} 

if (document.layers){ 
document.captureEvents(Event.MOUSEMOVE); 
} 
document.onmousemove = handlerMM; 

//--> 
</SCRIPT>