Omdat JavaScript is een client - side taal die draait op de gemeenschappelijke browser , kan het worden gebruikt om interactieve webpagina's weer te geven . JavaScript kan worden gebruikt om het venster scrollbar gebruik van een webpagina bepalen . In feite , is het mogelijk om een pop - up venster dat er geen schuifbalken helemaal heeft door het gebruik van JavaScript te creëren . Om JavaScript om dit niveau van interactiviteit bieden echter , het moet worden gekoppeld aan zowel CSS en JavaScript-bestanden . Instructies
1 Open uw HTML-editor toepassing en verklaren 2 divs in het document genaamd " scrollbar " en "Scroll . " Divs zijn tags die logische afdelingen definiëren op webpagina's binnen een inhoud van webpagina's en kunnen op dezelfde manier worden toegevoegd als tabellen en tabelcellen worden toegevoegd . De elementen van de eerste schuifbalk op de HTML-pagina moet er zo uitzien :
Controlling Scrollbars met JavaScript < /tegel > < /head > <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... plaats uw scrollen inhoud ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder " , " scroll " , true) ;//- . > < /script > ... < /body > <p> Plaats <br> de inhoud van webpagina's in de 2 divs kopen van 2 <p> Verklaar de CSS- en JavaScript- bestanden in de header van de HTML-pagina als volgt : <p> <head> <br> ... < koppeling rel = " stylesheet " type = " text /css " href = " scroll.css " mce_href = " scroll.css " media = " scherm , projectie " /> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script > ... < /head > <p> Plaats <br> de elementen van de tweede en andere scrollbars op de HTML-pagina als volgt : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... plaats uw scrollen inhoud ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder2 " , " scroll2 " , false) ;//- > < /script > ... <br> 3 <p> Maak de " Scroll.js " bestand en kopieer de volgende code in het bestand : <br> <p> /* aantal scrollen objecten * /document.No = 0 ; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( " Opera " ) > -1 ) ; <p> functie ScrollLoad <br> ( Area , Content , SettingTracSize ) { var code = " var scroller " + document.No + " = new dw_scrollObj ( Area , inhoud, inhoud , omgeving , document.No ) "; if ( SettingTracSize ) code + = " scroller " + document . Geen + " setBarSize (); . " ; eval ( code ) ; makeMouseWheeleScrolling ( Ruimte) ; document.No + + ; } <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0 <br> ; <br> <p> functie makeMouseWheeleScrolling ( ObjName ) { var obj = document.getElementById ( ObjName ) ; <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , wiel , false) ; } obj.onmousewheel = wiel ; } <p> functie moveUp <br> ( ouder ) { dw_scrollObj.initScroll ( parent.id , "up" ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + " " ) , " , 200 ) ; } <p> functie moveDown <br> ( ouder ) { dw_scrollObj.initScroll ( parent.id , " down " ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + " " ) ; " , 200 ) ; } <p> functie mouseStop <br> ( ParentID ) { dw_scrollObj.stopScroll ( ParentID ) ; mouseWheelTimer = 0 ; } <p> /* muiswiel functies <br> op de muis om te scrollen wiel efect op object met mijn js scrollbar * /functie handvat ( delta , ouder ) { var s = delta + " : " if ( delta < 0 ) {if ( isOpera ) moveUp ( ouder ) ; elsemoveDown ( ouder ) ; } else { if ( isOpera ) moveDown ( ouder ) ; elsemoveUp ( ouder ) ; } } <p> functie wiel <br> ( event ) { var delta = 0 ; ( ! event ) als 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 ) handvat ( delta , dit ) ; } /* < /muiswiel scrollen > * /<br> 4 <p> Zorg ervoor dat al uw bestanden zijn opgeslagen in dezelfde map en voer de HTML-pagina om te testen <br> < br . > <br></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td bgColor=#e7edf4 align=middle><script language='javascript' src='/ad/201310/3.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=90>
<tr>
<td align=left>Previous: <a class='LinkPrevArticle' href='/programmering/javascript-programming/201309/91225.html' >Hoe je problemen met Javascript Diagnose </a></li> </td>
<td align=right>Next: <a class='LinkNextArticle' href='/programmering/javascript-programming/201309/91227.html' >Hoe om te controleren een website voor een webbrowser Bug </a></li> </td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=18>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=246>
<tr>
<td height=246 vAlign=top width=199>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=199>
<tr>
<td height=244 vAlign=top width=197>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>JavaScript Programmeren</STRONG></td>
</tr>
</table>
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91012.html" title="Hoe maak je een iFrame Override in JavaScript " target="_self">Hoe maak je een iFrame Overrid…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91257.html" title="Hoe een adresbalk met JavaScript Verwijder " target="_self">Hoe een adresbalk met JavaScri…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90771.html" title="Javascript beëindigd String Letterlijke Fouten " target="_self">Javascript beëindigd String L…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91209.html" title="Hoe maak je een klok Run op een webpagina met behulp van Javascript " target="_self">Hoe maak je een klok Run op ee…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90755.html" title="Hoe maak je een boom met behulp van een doek in JavaScript " target="_self">Hoe maak je een boom met behul…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91045.html" title="Hoe je HTML tekst Wijzig in jQuery Input " target="_self">Hoe je HTML tekst Wijzig in jQ…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91248.html" title="Hoe te converteren naar HTML JSP " target="_self">Hoe te converteren naar HTML J…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/90988.html" title="Hoe te Count Down Met behulp van JavaScript " target="_self">Hoe te Count Down Met behulp v…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/javascript-programming/201309/91134.html" title="Hoe te VMWare Disk importeren in VirtualBox " target="_self">Hoe te VMWare Disk importeren …</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
<td vAlign=top width=12></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Related Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<tr>
<td height=201 width="33%"><IMG src="/img_xby/n1.jpg" width=111 height=182></td>
<td width="67%"><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96568.html' target="_self">Hoe maak je een Combo Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96567.html' target="_self">Hoe maak je een Check Box Maak in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96566.html' target="_self">Hoe maak je een tekstvak maken in Visual…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96565.html' target="_self">Hoe maak je een optie Box in Visual Basi…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96564.html' target="_self">Hoe maak je een schijf keuzelijst in Vis…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96563.html' target="_self">Hoe kan ik een keuzelijst maken in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96562.html' target="_self">Hoe kan ik een Picture Box Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96561.html' target="_self">Hoe een bestand keuzelijst Maak in Visua…</a><br><a class='LinkArticleCorrelative' href='/programmering/visual-basics-programming/201309/96560.html' target="_self">Hoe kan ik een afbeelding Box Maak in Vi…</a><br></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=8></td>
<td vAlign=top width=376>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=375>
<tr>
<td height=244 vAlign=top>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" bgColor=#dbe3ee>
<tr>
<td height=29 width="4%"> </td>
<td width="96%"><STRONG>Programmering Articles</STRONG></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<tr>
<td height=199 width="33%"><IMG src="/img_xby/n2.jpg" width=111 height=182></td>
<td width="67%">
<table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/92117.html" title="Hoe kan ik PHP -naamruimten gebruiken " target="_self">Hoe kan ik PHP -naamruimten gebruiken </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/java-programming/201309/90641.html" title="Hoe je Java Servlets Run " target="_self">Hoe je Java Servlets Run </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/87270.html" title="Hoe te compileren met COBOL " target="_self">Hoe te compileren met COBOL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/perl-programming/201309/93327.html" title="Hoe te gebruiken Notepad om een Perl- programma te compileren " target="_self">Hoe te gebruiken Notepad om een Perl- pr…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/86881.html" title="Hoe je je D-code compileren op Vim " target="_self">Hoe je je D-code compileren op Vim </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/computer-programming-languages/201309/88055.html" title="Hoe maak je een bron bijwerken SDK " target="_self">Hoe maak je een bron bijwerken SDK </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/visual-basics-programming/201309/94480.html" title="Hoe te DataSet & Bind DataGridView in verschillende discussies Vul " target="_self">Hoe te DataSet & Bind DataGridView in ve…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/php-mysql-programming/201309/91831.html" title="Hoe feedback te embedden in PHP " target="_self">Hoe feedback te embedden in PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmering/cc-programming/201309/86224.html" title="Hoe te bewerken Besturing Gebruik in MFC " target="_self">Hoe te bewerken Besturing Gebruik in MFC…</a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=57>
<tr>
<td class=bs background=/img_xby/di.jpg align=center>Copyright © Computer Kennis http://www.nldit.com <script language='javascript' src='/ad/201310/5.js'></script></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=970 align=center height=10>
<tr>
<td></td>
</tr>
</table>
</div>
</body>
</html>
|
