- Home Page
- > Script DHTML
- > Script DHTML Testo
- > Elenchi a Comparsa
Elenchi a Comparsa
Elenchi puntati a comparsa dall'alto. Effetto carino, si possono inserire anche link.
<HTML><HEAD><TITLE>titolo</TITLE>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<STYLE type=text/css>
.fly {
VISIBILITY: hidden; COLOR: navy; POSITION: relative
}
</STYLE>
<SCRIPT language=JavaScript>
function alignElements(el) {
/* Position the passed-in relatively positioned
element that is in the same coordinate system
on top of the element whose ID is src. */
el.style.pixelTop
= document.all.src.offsetTop - el.offsetTop;
el.style.pixelLeft
= document.all.src.offsetLeft - el.offsetLeft;
el.style.visibility = "visible";
}
function moveIn(el) {
// If the element is not at its position in the flow,
// move it closer.
var moved = false;
if (el.style.pixelTop < 0) {
el.style.pixelTop += 8;
if (el.style.pixelTop > 0)
el.style.pixelTop = 0;
moved = true;
}
else {
if (el.style.pixelTop > 0) {
el.style.pixelTop -= 8;
if (el.style.pixelTop < 0)
el.style.pixelTop = 0;
moved = true;
}
}
if (el.style.pixelLeft < 0) {
el.style.pixelLeft += 8;
if (el.style.pixelLeft > 0)
el.style.pixelLeft = 0;
moved = true;
}
else {
if (el.style.pixelTop > 0) {
el.style.pixelLeft -= 8;
if (el.style.pixelLeft < 0)
el.style.pixelLeft = 0;
moved = true;
}
}
/* The move variable reflects whether the element has
moved. If the element has already reached its position
in the flow, this function returns false. */
return moved;
}
function flyInTogether() {
var more = false;
// Animate into place all elements with class name fly.
for (var intLoop = 0; intLoop < document.all.length;
intLoop++) {
if ("fly" == document.all[intLoop].className)
more = moveIn(document.all[intLoop]) || more;
}
// Keep running until all elements reach their locations
// in the flow.
if (more)
setTimeout("flyInTogether()", 10);
}
function setup() {
// Align all elements that are going to be animated.
for (var intLoop = 0; intLoop < document.all.length;
intLoop++) {
if ("fly" == document.all[intLoop].className)
alignElements(document.all[intLoop]);
}
flyInTogether();
}
window.onload = setup;
</SCRIPT>
<META content="MSHTML 6.00.2600.0" name=GENERATOR></HEAD>
<BODY>
<H1 id=src>INSERISCI QUI IL TITOLO</H1>
<UL>
<LI class=fly>
<P>E qui le voci dell'elenco...</P>
<LI class=fly>
<P>E qui le voci dell'elenco..</P>
<LI class=fly>
<P>E qui le voci dell'elenco..</P>
<LI class=fly>
<P>E qui le voci dell'elenco..</P>
<LI class=fly>
<P>E qui le voci dell'elenco..</P>
<LI class=fly>
<P><a href="#">Puoi inserire anche link...</a></P></LI></UL>
</BODY></HTML>
A colpo d'occhio
Be Responsive
HTML 5
HTML 5 è un linguaggio di markup utilizzato per la strutturazione e il contenuto delle pagine Web.
CSS 3
CSS 3 è l'ultima evoluzione dei fogli di stile CSS. Contiene molte novità come angoli arrotondati, ombre, sfumature, transizioni o animazioni.
jQuery
jQuery è una libreria JavaScript cross-platform progettata per semplificare lo scripting lato client.