|
|
|
| Come controllare Barre di scorrimento con Javascript |
|
Dal JavaScript è un linguaggio lato client che viene eseguito sul browser comune , può essere utilizzato per visualizzare le pagine web interattive . JavaScript può essere utilizzato per controllare le caratteristiche della finestra della barra di scorrimento di una pagina web . In realtà, è possibile creare una finestra pop- up che non ha barre di scorrimento a tutti utilizzando JavaScript . In modo che il supporto JavaScript per offrire questo livello di interattività tuttavia , ha bisogno di essere collegato ad entrambi i file CSS e JavaScript . Istruzioni 1 Aprire l'applicazione editor HTML e di dichiarare 2 div nel documento denominato " barra di scorrimento " e " Scroll ". Div sono i tag che definiscono le divisioni logiche su pagine web all'interno di un contenuto della pagina web e possono essere aggiunti allo stesso modo vengono aggiunte tabelle e celle di tabelle . Gli elementi della prima barra di scorrimento nella pagina HTML dovrebbe essere simile a questo:
Controllo Barre di scorrimento con JavaScript < /piastrelle > < /head> <body> <div ... id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... posizionare il contenuto scorrevole qui ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder " , " scorrere ", true ) ;//- . > < /script> ... < /body> <br> <p> Inserire il contenuto della pagina web in 2 div <br> 2 <p> dichiarare i file CSS e JavaScript l'intestazione della pagina HTML come segue : <br> <p> <head> ... < link rel = tipo " foglio di stile " = "text /css " href = " scroll.css " mce_href = " scroll.css "media = " schermo di proiezione " /> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script > ... < /head> <br> <p> Posizionare gli elementi della seconda e le altre barre di scorrimento nella pagina HTML come segue : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... posizionare il contenuto scorrevole qui ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder2 " , " Scroll2 " , false) ;//- > < /script> ... <br> 3 <p> Creare il file " Scroll.js " e copiare il seguente codice nel file : <br> <p> /* numero di oggetti di scorrimento * /document.No = 0; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( " Opera" ) > -1) ; <br> <p> funzione ScrollLoad ( Area , Contento, SettingTracSize ) {var codice = "var scroller " + document.No + " = new dw_scrollObj ( Area, contenuto, contenuti , Area, document.No ) ;" se ( SettingTracSize ) codice + = " scroller " + documento . Nessun + " setBarSize (); ". ; eval ( codice ) ; makeMouseWheeleScrolling ( Area ) ; document.No + + ; } <br> <p> /* <mouse wheele scrolling> * /var mouseWheelTimer = 0 ; <br> <p> funzione makeMouseWheeleScrolling ( objName ) {var obj = document.getElementById ( objName ) ; <br> <p> se ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , ruota , false) ; } obj.onmousewheel = ruota ; } <br> <p> funzione moveUp ( genitore ) { dw_scrollObj.initScroll ( parent.id , "up "); clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + "' ) , " , 200); } <br> <p> funzione moveDown ( parent ) { dw_scrollObj.initScroll ( parent.id , " giù "); clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + " '); " , 200); } <br> <p> funzione mouseStop ( parentId ) { dw_scrollObj.stopScroll ( parentId ) ; mouseWheelTimer = 0 ;} <br> funzioni della rotellina del mouse <p> /* per scorrere il topo ruota EFF sopra oggetto con il mio js scrollbar * /function handle ( delta , genitore ) {var s = delta + " : " ; if ( delta < 0 ) {if ( isOpera ) moveUp ( genitore ) ; elsemoveDown ( genitore ) ; } else { if ( isOpera ) moveDown ( genitore ) ; elsemoveUp ( genitore );} } <br> ruota funzione <p> (event ) {var delta = 0; ( ! evento ) se l'evento = window.event ; se ( event. wheelDelta ) { delta = event.wheelDelta/120 ; se ( window.opera ) = delta -delta ; } else if ( event.detail ) { delta = - event.detail /3; } if ( delta) maniglia ( delta , questo ) ; } /* < /mouse con rotella di scorrimento > * /<br> 4 <p> verificare tutti i file vengono salvati nella stessa cartella ed eseguire la pagina HTML per testare <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='/Programmazione/javascript-programming/91225.html' >Come diagnosticare problemi con Javascript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/Programmazione/javascript-programming/91227.html' >Come controllare un sito web per 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"> Articoli Correlati </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="/Programmazione/javascript-programming/90750.html" title="Alternative al Pulsanti in JQuery " target="_self">Alternative al Pulsanti in JQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91170.html" title="Come fare Gemstone sapone " target="_self">Come fare Gemstone sapone </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90982.html" title="Come modificare immagini menu al passaggio del mouse in JavaScript " target="_self">Come modificare immagini menu al passaggio del mouse in…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90757.html" title="Che cos'è il bubbling degli eventi " target="_self">Che cos'è il bubbling degli eventi </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91267.html" title="Come creare un modulo di registrazione per un sito web " target="_self">Come creare un modulo di registrazione per un sito web </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90953.html" title="Come rimuovere un array associativo JavaScript " target="_self">Come rimuovere un array associativo JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90755.html" title="Come disegnare un albero utilizzando una tela in Javascript " target="_self">Come disegnare un albero utilizzando una tela in Javasc…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91098.html" title="Come creare una Galleria Fotografica con Avanti e Indietro Links & Grande immagine pop-up " target="_self">Come creare una Galleria Fotografica con Avanti e Indie…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90843.html" title="Come fare un User Script nel GreaseMonkey " target="_self">Come fare un User Script nel GreaseMonkey </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/91193.html" title="Come riempire un Combobox con JavaScript " target="_self">Come riempire un Combobox con JavaScript </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">Articoli in evidenza </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="/Programmazione/java-programming/90646.html" title="Come impostare Mucchio Spazio Java " target="_self">Come impostare Mucchio Spazio Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88043.html" title="Come reinstallare il bootloader Grub " target="_self">Come reinstallare il bootloader Grub </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/computer-programming-languages/88034.html" title="Come si usa SCGrid ActiveX Grid Control " target="_self">Come si usa SCGrid ActiveX Grid Control </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/cc-programming/86159.html" title="Come ordinare un elenco generico " target="_self">Come ordinare un elenco generico </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/visual-basics-programming/94945.html" title="Come sostituire con VBA " target="_self">Come sostituire con VBA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/javascript-programming/90914.html" title="Come nascondere un redirect " target="_self">Come nascondere un redirect </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/90549.html" title="Come scaricare Java 1.6 " target="_self">Come scaricare Java 1.6 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/ruby-programming/94157.html" title="Come esecuzione di Ruby in jEdit " target="_self">Come esecuzione di Ruby in jEdit </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/java-programming/89322.html" title="Parse in Java " target="_self">Parse in Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmazione/python-programming/94085.html" title="Come convertire una tupla di una lista in Python " target="_self">Come convertire una tupla di una lista in 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 © Conoscenza Informatica http://it.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
