Categorías
Tutoriales

Scroll de texto controlado arriba y abajo

 
Para crear un scroll de texto controlado de arriba y abajo  utilizando etiquetas pondremos el siguiente código.
 
</head>
<body>
<p align=”center”><b><font color=#00FFFF><b>
<SCRIPT TYPE=text/javascript>
// adjust the position values here, and in the html, to suit your use
var pos=0;     // initial top position
var stp=10;     // step increment size
var spd=100;    // speed of increment
var upr=-250;   // upper limiter
var lwr=20;     // lower limiter
var tim;        // timer variable
var off_l=80;   // left offset
var off_t=0;   // top offset
var off_b=270;  // bottom offset
var slb_w=300;  // slab width
var slb_h=800;  // slab height
var fnt_f=”verdana”; // font name
var fnt_h=”8pt”;    // font size
var bgc_t=”white”; // top backgroundcolor
var bgc_b=”white”; // bottom backgroundcolor
var bgc_s=”white”; // slab backgroundcolor
var slab_content = ‘TEXTO <br>TEXTO<br>TEXTO <br> TEXTO<br>’;
slab_content += ‘TEXTO<br>TEXTO<br> TEXTO <br>TEXTO<br><br>’;
slab_content += ‘TEXTO<br>TEXTO <br>TEXTO <br>TEXTO<br>TEXTO<br> TEXTO’;
slab_content += ‘<br><br>TEXTO<br>TEXTO<br>TEXTO<br>TEXTO<br>TEXTO<br>TEXTO<br>TEXTO’;
// top slab border
var divTop_content=””;
// bottom slab border
var divBtm_content = ‘<HR><TABLE BORDER=”0″ WIDTH=”100%”><TR><TD ALIGN=”left”>’;
divBtm_content += ‘<A HREF=”#” ONMOUSEOVER=”scroll_dn()” ONMOUSEOUT=”no_scroll()”><B>ABAJO</B></A></TD>’;
divBtm_content += ‘<TD ALIGN=”right”>’;
divBtm_content += ‘<A HREF=”#” ONMOUSEOVER=”scroll_up()” ONMOUSEOUT=”no_scroll()”><B>ARRIBA</B></A>’;
divBtm_content += ‘</TD></TR></TABLE>’;
if(window!=top)top.location.href=location.href;
var msg=”You must have version 4+ IE or NS.”
var dyn=(document.layers||document.all)?true:alert(msg);
var isNS=(document.layers);
var isIE=(document.all);
function scroll_dn(){
if(pos>upr)pos-=stp;
do_scroll(pos);
tim=setTimeout(“scroll_dn()”,spd);
}
function scroll_up(){
if(pos<lwr)pos+=stp;
do_scroll(pos);
tim=setTimeout(“scroll_up()”,spd);
}
function do_scroll(pos){
if(isIE) document.all.divTxt.style.top=pos;
if(isNS) document.divTxt.top=pos;
}
function no_scroll() { clearTimeout(tim); }
if(isIE) {
document.write(‘<DIV ID=”divTop” STYLE=”position:absolute; top:0; left:’+off_l+’; width:’+slb_w+’; height:’+off_t+’; background-color:’+bgc_t+’; z-index:2″>’+divTop_content+'</DIV>’);
document.write(‘<DIV ID=”divBtm” STYLE=”position:absolute; top:’+off_b+’; left:’+off_l+’; width:’+slb_w+’; height:’+slb_h+’; background-color:’+bgc_b+’;font-size:’+fnt_h+’; z-index:2″>’+divBtm_content+'</DIV>’);
document.write(‘<DIV ID=”divTxt” STYLE=”position:absolute; top:’+off_t+’; left:’+off_l+’; width:’+slb_w+’; font-family:’+fnt_f+’; font-size:’+fnt_h+’; background-color:’+bgc_s+’; z-index:1″>’+slab_content+'</DIV>’);
}
if(isNS){
document.write(‘<LAYER ID=”divTop” position=”absolute” top=”0″ left=”‘+off_l+'” width=”‘+slb_w+'” height=”‘+off_t+'” bgcolor=”‘+bgc_t+'” z-index=”2″>’+divTop_content+'</LAYER>’);
document.write(‘<LAYER ID=”divBtm” position=”absolute” top=”‘+off_b+'” left=”‘+off_l+'” width=”‘+slb_w+'” height=”‘+slb_h+'” bgcolor=”‘+bgc_b+'” font-size=”‘+fnt_h+'” z-index=”2″>’+divBtm_content+'</LAYER>’);
document.write(‘<LAYER ID=”divTxt” position=”absolute” top=”‘+off_t+'” left=”‘+off_l+'” width=”‘+slb_w+'” font-family=”‘+fnt_h+'” font-size=”‘+fnt_h+'” bgcolor=”‘+bgc_s+'” z-index=”1″>’+slab_content+'</LAYER>’);
}
</SCRIPT>
</b></p>
</body>
</html>
 
Una vez puesto el código y modificado creara un efecto manual que pasando el ratón, el texto ira hacia arriba o hacia abajo.
 

Facebook: https://www.facebook.com/EIMafias/

Twitter:@ElMafiasdelTuit

Instagram: https://www.instagram.com/paramissuperioresoficial/

Twitch: https://www.twitch.tv/eimafias/



Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.