| Hjem | Hardware | Netværk | Programmering | software | Fejlfinding | systemer | 
Programmering  
  • C /C + + Programming
  • Computer Programmeringssprog
  • Delphi programmering
  • Java programmering
  • JavaScript Programmering
  • PHP /MySQL programmering
  • Perl programmering
  • Python Programming
  • Ruby Programming
  • Visual Basics Programmering
  •  
    Computer Viden >> Programmering >> JavaScript Programmering >> Content
    Sådan Control Rullebjælker Med Javascript
    Siden JavaScript er et client -side sprog , der kører på den fælles browser, kan det anvendes til at vise interaktive websider. JavaScript kan bruges til at styre vinduer scrollbar funktioner i en webside. Faktisk er det muligt at skabe et pop- up vindue, der ikke har nogen scrollbars på alle ved hjælp af JavaScript . For at JavaScript tilbyde dette niveau af interaktivitet men det skal være knyttet til både CSS og JavaScript -filer . Instruktioner
    1

    Åbn din HTML-editor ansøgning og erklære 2 divs i dokumentet hedder " scrollbar " og " Scroll ". Divs er tags , der definerer logiske divisioner på websider inden for en webside indhold og kan tilføjes på samme måde som tabeller og tabelceller er tilføjet. Elementerne i den første scrollbar på HTML-siden skal se sådan ud : Hej

    Styring Rullebjælker med JavaScript < /klinker > < /head> <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... placere din rulle indhold her ... < /div> < /div> <script type="text/javascript"> <- ScrollLoad ( " scrollholder ", " rulle " , true ) ;//- . > </script> ... </body > <br> <p> Placer webside indhold i de 2 divs <br> 2 <p> erklære CSS og JavaScript -filer i overskriften på HTML-side som følger : Hej <p> <head> ... < link rel = " stylesheet " type = " text /css " href = " scroll.css " mce_href = " scroll.css "media =" screen , projektion "/> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> </script> ... </head > <br> <p> Placer elementerne i den anden og andre scrollbars på den HTML-side som følger : Hej <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... placere din rulle indhold her ... < /div> < /div> <script type="text/javascript"> <- ScrollLoad ( " scrollholder2 ", " scroll2 " falsk) ;//-> </script> ... <br> 3 <p> Opret " Scroll.js " fil og kopiere følgende kode i filen : Hej <p> /* antallet af rulle objekter * /document.No = 0; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( "Opera " ) > -1 ) <br> <p> funktion ScrollLoad ( Area , Indhold, SettingTracSize ) {var code = "var scroller " + document.No + " = new dw_scrollObj ( Area, indhold, indhold , Area, document.No ) ", hvis ( SettingTracSize ) kode + = " scroller " + dokument . Ingen + " setBarSize (); ." eval ( kode) makeMouseWheeleScrolling ( Samarbejdsområde) document.No + + ;} <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0; <br> <p> funktion makeMouseWheeleScrolling ( objName ) {var obj = document.getElementById ( objName ), <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , hjul , falske );} obj.onmousewheel = hjul ;} <br> <p> funktion Moveup (moder ) { dw_scrollObj.initScroll ( parent.id , "op" ), clearInterval ( mouseWheelTimer ) mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + ") , " , 200 );} <br> <p> funktion moveDown (moder ) { dw_scrollObj.initScroll ( parent.id , " ned "); clearInterval ( mouseWheelTimer ) mouseWheelTimer = setTimeout ( " mouseStop ( ' "+ parent.id + " '); " , 200 );} <br> <p> funktion mouseStop ( parentId ) { dw_scrollObj.stopScroll ( parentId ) mouseWheelTimer = 0; } <br> <p> /* musehjulet funktioner til at rulle på musen hjul indvirket over objekt med min js scrollbar * /funktion håndtaget ( delta, forælder) {var s = delta + " :" if ( delta <0 ) { if ( isOpera ) Moveup (moder ), elsemoveDown (moder );} else { if ( isOpera ) moveDown (moder ), elsemoveUp (moder );}} <br> <p> funktion hjul (begivenhed) {var delta = 0; ( ! begivenhed) , hvis event = window.event , hvis ( event. wheelDelta ) { delta = event.wheelDelta/120 , hvis ( window.opera ) delta = -delta ;} else if ( event.detail ) { delta = - event.detail /3; } if ( delta) håndtaget ( delta, dette );} /* </musehjulet rulle > * /<br> 4 <p> Sørg for at alle dine filer gemmes i den samme mappe og køre HTML-side til at teste <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>Forrige : <a class='LinkPrevArticle' href='/Programmering/javascript-programming/91225.html' >Sådan diagnosticere problemer med Javascript </a></li></p></td> </tr> <tr> <td width="49%"> næste : <a class='LinkNextArticle' href='/Programmering/javascript-programming/91227.html' >Sådan kontrolleres en hjemmeside for en JavaScript Bug </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"> Relaterede artikler </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="/Programmering/javascript-programming/91235.html" title="Sådan vises XML Med JavaScript " target="_self">Sådan vises XML Med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91047.html" title="Sådan Test for en tom array med JavaScript " target="_self">Sådan Test for en tom array med JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90933.html" title="Sådan redigeres et brev Acajoom " target="_self">Sådan redigeres et brev Acajoom </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91114.html" title="Sådan oprettes en adgangskode til en hjemmeside " target="_self">Sådan oprettes en adgangskode til en hjemmeside </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90805.html" title="Sådan bruges Code DBL " target="_self">Sådan bruges Code DBL </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90806.html" title="Sådan bruges Google Maps API Afstand Radius " target="_self">Sådan bruges Google Maps API Afstand Radius </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91005.html" title="Sådan pakkes parametre fra en URL med Javascript " target="_self">Sådan pakkes parametre fra en URL med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/91279.html" title="Sådan installeres Scripts til Greasemonkey " target="_self">Sådan installeres Scripts til Greasemonkey </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90966.html" title="Sådan Timeout i JavaScript " target="_self">Sådan Timeout i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/javascript-programming/90761.html" title="Dato Forskel i Java Script " target="_self">Dato Forskel i Java Script </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">Anbefalede Artikler </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="/Programmering/computer-programming-languages/88015.html" title="Hvordan at skelne mellem DFA & NDFA " target="_self">Hvordan at skelne mellem DFA & NDFA </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/perl-programming/93311.html" title="Sådan Send HTML Text Med SMTP Perl " target="_self">Sådan Send HTML Text Med SMTP Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/python-programming/93446.html" title="Hvordan virker Trafik Python Arbejde " target="_self">Hvordan virker Trafik Python Arbejde </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/89175.html" title="Sådan importeres en Java-applet " target="_self">Sådan importeres en Java-applet </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/visual-basics-programming/94457.html" title="Hvordan man laver en Radio Button Standard i Visual Basic " target="_self">Hvordan man laver en Radio Button Standard i Visual Bas…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/cc-programming/85250.html" title="Formål CString Methods " target="_self">Formål CString Methods </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/89115.html" title="Sådan Roter billeder Med Tile i Java " target="_self">Sådan Roter billeder Med Tile i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88147.html" title="Hvad er en proxy klasse " target="_self">Hvad er en proxy klasse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/java-programming/90711.html" title="Hvordan kan man se hvilken version af Java kører på min computer " target="_self">Hvordan kan man se hvilken version af Java kører på m…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/Programmering/computer-programming-languages/88857.html" title="Sådan Tilpas grammatikkontrol Brug Office XP " target="_self">Sådan Tilpas grammatikkontrol Brug Office XP </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 © Computer Viden http://www.computerdk.com <script language='javascript' src='/ad/201310/1.js'></script></td> </tr> </table> </div> </body> </html>