|
|
|
| Cómo controlar las barras de desplazamiento Con Javascript |
|
Desde JavaScript es un lenguaje del lado del cliente que se ejecuta en el navegador común , que puede ser empleado para mostrar las páginas web interactivas . JavaScript se puede utilizar para controlar las funciones de ventana barra de desplazamiento de una página web. De hecho , es posible crear una ventana pop -up que no tiene barras de desplazamiento en absoluto por el uso de JavaScript . A fin de que JavaScript ofrecer este nivel de interactividad sin embargo, debe estar vinculada a los dos archivos CSS y JavaScript . Instrucciones 1 Abra su aplicación de edición de HTML y declarar 2 divs en el documento denominado " barra de desplazamiento " y "Scroll ". Div son etiquetas que definen las divisiones lógicas en las páginas web de un contenido de la página web y se puede agregar la misma manera que se agregan tablas y celdas de tablas . Los elementos de la primera barra de desplazamiento en la página HTML debe ser similar a esto:
html head Control Scrollbars con JavaScript < /azulejo > < /head> <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... coloque el contenido de desplazamiento aquí ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder ", " desplazamiento ", true ) ;//- . > < /script > ... < /body> <br> <p> Coloque el contenido de la página web en los 2 divs <br> 2 <p> Declarar los archivos CSS y JavaScript en la cabecera de la página HTML de la siguiente manera : <br> <p> <head> ... link rel tipo "stylesheet " = = "text /css" = " scroll.css " mce_href = " scroll.css < href "media =" pantalla de proyección "/> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script> ... < /head> <br> <p> lugar los elementos de la segunda y otras barras de desplazamiento en la página HTML de la siguiente manera : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... coloque el contenido de desplazamiento aquí ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder2 ", " Scroll2 " , false) ;//-> < /script> ... <br> 3 <p> Crear el archivo " Scroll.js " y copiar el código siguiente en el archivo : <br> <p> /* número de objetos desplazamiento * /document.No = 0 ; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( "Opera ") > -1 ) ; <br> función <p> ScrollLoad (Area , contenido , SettingTracSize ) { var code = "var scroller " document.No + + " = new dw_scrollObj ( Area, contenido, Contenido , Area, document.No ) ; " ; if ( SettingTracSize ) Código + = " scroll " + documento . No + " setBarSize (); ". ; eval ( código ) ; makeMouseWheeleScrolling ( Area) ; document.No + + ;} <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0 ; <br> <p> función makeMouseWheeleScrolling ( objName ) { var obj = document.getElementById ( objName ) ; <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , rueda , false) ;} obj.onmousewheel = rueda; } <br> <p> moveUp función ( padre) { dw_scrollObj.initScroll ( parent.id , "arriba" ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + "' ) ; " , 200) ;} <br> <p> moveDown función ( padre) { dw_scrollObj.initScroll ( parent.id , " abajo " ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' "+ parent.id + "' ) " , 200) ;} <br> <p> mouseStop función ( parentid ) { dw_scrollObj.stopScroll ( parentid ) ; mouseWheelTimer = 0 ;} <br> funciones de la rueda del ratón <p> /* para desplazarse en el ratón efect rueda sobre objeto con mi barra de desplazamiento tirador js * /function (delta , padre ) { var s = delta + " :"; if ( delta < 0 ) { if ( isOpera ) moveUp (padre ) ; elsemoveDown (padre ) ;} else { if ( isOpera ) moveDown (padre ) ; elsemoveUp (padre ) ;} } <br> <p> rueda de función ( evento) { var delta = 0 ; (! caso ) si event = window.event ; if ( event. wheelDelta ) { delta = event.wheelDelta/120 ; if ( window.opera ) = delta -delta ; } else if ( event.detail ) { delta = - event.detail /3 ;} if ( delta) mango (delta , esta ) ;} /* < rueda de desplazamiento /ratón > * /<br> 4 <p> aseguren que todos sus archivos se guardan en la misma carpeta y ejecutar la página HTML para probar <br> < br . > <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="95%" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#DEE7EE">
<tr>
<td></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="91%" height="52" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="51%"><p>Previous ： <a class='LinkPrevArticle' href='/Programacion/javascript-programming/91225.html' >Cómo diagnosticar problemas con javascript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programacion/javascript-programming/91227.html' >Cómo comprobar un sitio web para un Bug JavaScript </a></li></td>
</tr>
</table></td>
</tr>
</table>
<table width="100%" height="7" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table width="770" height="246" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td width="375" height="246" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm"> Artículos relacionados </td> </tr>
</table>
<table width="95%" height="209" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="201"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90863.html" title="Cómo utilizar una mesa de luz de JavaScript " target="_self">Cómo utilizar una mesa de luz de JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91001.html" title="Cómo poner un Facebook Connect en el pie de página Uso de JavaScript " target="_self">Cómo poner un Facebook Connect en el pie de página Us…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/90892.html" title="Cómo eliminar un subdominio en JavaScript " target="_self">Cómo eliminar un subdominio en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91134.html" title="Cómo importar VMWare disco en VirtualBox " target="_self">Cómo importar VMWare disco en VirtualBox </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91154.html" title="Cómo dibujar un gráfico circular Usando Javascript " target="_self">Cómo dibujar un gráfico circular Usando Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91277.html" title="Cómo utilizar HREF JavaScript Links " target="_self">Cómo utilizar HREF JavaScript Links </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91170.html" title="Cómo hacer jabón piedras preciosas " target="_self">Cómo hacer jabón piedras preciosas </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91184.html" title="Cómo comparar String de Java Script " target="_self">Cómo comparar String de Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91210.html" title="Cómo crear XLS con JavaScript " target="_self">Cómo crear XLS con JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/javascript-programming/91273.html" title="Lo que se utiliza JavaScript para " target="_self">Lo que se utiliza JavaScript para </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
<td width="20" valign="top"></td>
<td width="375" valign="top"><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian">
<tr>
<td height="244" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="img_dm/danmai_r4_c04 -.jpg" bgcolor="#DBE3EE">
<tr>
<td width="4%" height="29"> </td>
<td width="96%" class="lan_lm">Artículos destacados </td> </tr>
</table>
<table width="95%" height="207" border="0" align="center" cellpadding="0" cellspacing="4">
<tr>
<td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90676.html" title="Acerca de la certificación Java " target="_self">Acerca de la certificación Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95320.html" title="Cómo hacer scripts VBS " target="_self">Cómo hacer scripts VBS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/96249.html" title="Cómo convertir Fortran para Visual Basic " target="_self">Cómo convertir Fortran para Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/85978.html" title="Turbo C Métodos Clasificación " target="_self">Turbo C Métodos Clasificación </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/cc-programming/86247.html" title="Cómo utilizar la función strpbrk en C + + " target="_self">Cómo utilizar la función strpbrk en C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/95418.html" title="Cómo comparar una cita con VB.NET " target="_self">Cómo comparar una cita con VB.NET </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/java-programming/90730.html" title="¿Cómo hacer recorrido postorden en un árbol binario en Java " target="_self">¿Cómo hacer recorrido postorden en un árbol binario …</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/php-mysql-programming/92360.html" title="Cómo ocultar un archivo PHP " target="_self">Cómo ocultar un archivo PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/visual-basics-programming/94534.html" title="Cómo Pen un archivo en VB.NET con una aplicación específica " target="_self">Cómo Pen un archivo en VB.NET con una aplicación espe…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programacion/python-programming/93434.html" title="Cómo construir un analizador de Python " target="_self">Cómo construir un analizador de Python </a></td></tr><tr></tr></table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table width="980" height="8" border="0" cellpadding="0" cellspacing="0">
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 bgColor=#36506e height=90>
<tr>
<td class=bs height=90 align=middle>Copyright © Conocimientos Informáticos http://ordenador.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
