Dator
 |  Startsida |  Hårdvara |  Nätverk |  Programmering |  Programvara |  Felsökning |  System |   
Programmering
  • C /C + + -programmering
  • Computer Programspråk
  • Delphi Programmering
  • Java Programming
  • JavaScript programmering
  • PHP /MySQL Programmering
  • perl Programmering
  • python Programming
  • Ruby programmering
  • Visual Basics Programmering
    		•
    * Dator Kunskap >> Programmering >> JavaScript programmering >> Content

    Hur Kontroll Scrollbars Med Javascript
    Eftersom JavaScript är ett klient - side språk som körs på vanliga webbläsare , kan den användas för att visa interaktiva webbsidor . JavaScript kan användas för att styra fönster scrollbar funktioner i en webbsida . I själva verket är det möjligt att skapa en pop - up fönster som inte har några rullningslister alls genom att använda JavaScript . För att JavaScript att erbjuda denna nivå av interaktivitet men måste det vara kopplat till både CSS och JavaScript -filer . Instruktioner
    1

    Öppna din HTML- editor program och deklarera 2 divar i dokumentet kallas " rullningslist " och " Scroll ". Divar är taggar som definierar logiska indelningar på webbsidor inom en webbsida innehåll och kan läggas på samma sätt som tabeller och tabellceller tillsätts . Elementen i den första rullningslisten på HTML-sidan ska se ut så här :

    Styra Scrollbars med JavaScript < /kakel > < /head > <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... Placera din rullning innehåll här ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder " , " rulla " , true ) ;//- . > < /script > ... < /body> <br> <p> Placera sidans innehåll i 2 divar <br> 2 <p> deklarera CSS och JavaScript -filer i huvudet på HTML- sidan enligt följande : <br> <p> <head><meta name=viewport content="width=device-width, initial-scale=1.0"> ... < 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> Place de delar av den andra och andra rullningslister på HTML- sidan enligt följande : <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... Placera din rullning innehåll här ... < /div > < /div > <script type="text/javascript"> < - ! ScrollLoad ( " scrollholder2 " , " scroll2 " , false ) ;//- > < /script > ... <br> 3 <p> Skapa " Scroll.js " filen och kopiera följande kod i filen : <br> <p> /* antalet rullande objekt * /document.No = 0 ; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( " Opera " ) > -1 ) , <br> <p> funktion ScrollLoad ( Area , Innehåll , SettingTracSize ) {var code = " var scroller " + document.No + " = ny dw_scrollObj ( Area , Innehåll , Innehåll , område , document.No ) , " , om ( SettingTracSize ) kod + = " scroller " + dokument . Ingen + " setBarSize ( ) , . " , eval ( kod), makeMouseWheeleScrolling ( område ) , document.No + + ; } <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0 ; <br> <p> funktion makeMouseWheeleScrolling ( objname ) {var obj = document.getElementById ( objname ) ; <br> <p> om ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , hjul , false ) ; } obj.onmousewheel = hjul ; } <br> <p> funktion moveUp ( förälder ) { dw_scrollObj.initScroll ( parent.id , " up " ) , clearInterval ( mouseWheelTimer ) , mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + " ' ) , " , 200 ) ; } <br> <p> funktion moveDown ( förälder ) { dw_scrollObj.initScroll ( parent.id , " ner " ) ; clearInterval ( mouseWheelTimer ) , mouseWheelTimer = setTimeout ( " mouseStop ( ' " + parent.id + " ' ) ; " , 200 ) ; } <br> <p> funktion mouseStop ( ParentId ) { dw_scrollObj.stopScroll ( ParentId ) , mouseWheelTimer = 0; } <br> <p> /* mushjulet funktioner för att bläddra på musen hjul EFECT över objektet med min js scrollbar * /funktion handtag (delta , förälder ) {var s = delta + " : " ; om (delta < 0 ) {if ( isOpera ) moveUp ( förälder ) , elsemoveDown ( moder ) ; } else { if ( isOpera ) moveDown ( förälder ) , elsemoveUp ( moder ) ;} } <br> <p> funktion hjul (event ) {var delta = 0 ; ( ! händelse ) om händelsen = window.event , om ( event. wheelDelta ) { delta = event.wheelDelta/120 , om ( window.opera ) delta = -delta ; } else if ( event.detail ) { delta = - event.detail /3 ;} if ( delta) handtag (delta , detta ) ; } /* < /mushjulet rullning > * /<br> 4 <p> Se alla dina filer sparas i samma mapp och kör HTML- sida för att testa <br> <br . > <br> <div class=dad2><script language='javascript' src='/ad/201310/4.js'></script></div> <div class=dad3><script language='javascript' src='/ad/201310/33.js'></script></div> </div> </td> </tr> </table> <table class=dhang1 bgcolor="#DEE7EE"> <tr> <td></td> </tr> </table> <div class=dhang7></div> <table width="92%" height="51" border="0" align="center" cellpadding="0" cellspacing="0"> <tr> <td width="50%"><p>Tidigare: <a class='LinkPrevArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91225.html' >Hur att diagnostisera problem med Javascript </a></li></p></td> </tr> <tr> <td width="50%">nästa: <a class='LinkNextArticle' href='http://www.dator.xyz/Programmering/javascript-programming/91227.html' >Hur vill kolla en webbplats för en JavaScript bugg </a></li></td> </tr> </table></td> </tr> </table> <div class=dhang7></div> <table class=s770x246 > <tr> <td class=s375x246 ><table width="380" border="0" cellpadding="0" cellspacing="0" class="bian"> <tr> <td height="244" valign="top"><table class=c1 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm"> relaterade artiklar </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="http://www.dator.xyz/Programmering/javascript-programming/91261.html" title="Hur du aktiverar JavaScript Debugging " target="_self">Hur du aktiverar JavaScript Debugging </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90951.html" title="Hur Ring JavaScript Från en HTML-mall " target="_self">Hur Ring JavaScript Från en HTML-mall </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91096.html" title="XML Tool Tips Tutorial " target="_self">XML Tool Tips Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/91148.html" title="Styra en webbsida med HTML " target="_self">Styra en webbsida med HTML </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90839.html" title="Korrekta ramuppsättningar för JavaScript " target="_self">Korrekta ramuppsättningar för JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90971.html" title="Hur man skapar en blinkande ram på DIV " target="_self">Hur man skapar en blinkande ram på DIV </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90909.html" title="Hur man tar bort Minus & Plus Tecken i Javascript " target="_self">Hur man tar bort Minus & Plus Tecken i Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90759.html" title="Vad är Nedläggningar Bra för i JavaScript " target="_self">Vad är Nedläggningar Bra för i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90897.html" title="Hur man använder JS att skriva till ett annat dokument " target="_self">Hur man använder JS att skriva till ett annat dokument…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/javascript-programming/90752.html" title="Hur man kan koda Parametrar i AJAX " target="_self">Hur man kan koda Parametrar i AJAX </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 class=c3 > <tr> <td width="4%" height="29"> </td> <td width="96%" class="lan_lm">Utvalda artiklarna </td> </tr> </table> <table class=c4 > <tr> <td height="199"><table width="100%" cellpadding="0" cellspacing="0"><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/93120.html" title="Hur du jämför Datum med SQL Oracle " target="_self">Hur du jämför Datum med SQL Oracle </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/93184.html" title="Så här importerar en MySQL databas " target="_self">Så här importerar en MySQL databas </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/85934.html" title="C MDI Tutorial " target="_self">C MDI Tutorial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87887.html" title="Lägga till en förloppsindikator Guiden " target="_self">Lägga till en förloppsindikator Guiden </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/88396.html" title="Vad är skillnaden mellan Personsökning & segmentering " target="_self">Vad är skillnaden mellan Personsökning & segmentering…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/python-programming/93829.html" title="Regular Expression Handledning för Python 2.5 " target="_self">Regular Expression Handledning för Python 2.5 </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/cc-programming/86206.html" title="Hur man deklarerar Inline funktioner i C + + " target="_self">Hur man deklarerar Inline funktioner i C + + </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/visual-basics-programming/95655.html" title="Hur man återställer Trymedia Trial " target="_self">Hur man återställer Trymedia Trial </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/php-mysql-programming/92642.html" title="Hur man använder PHP post för att skicka till en e-postlista " target="_self">Hur man använder PHP post för att skicka till en e-po…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.dator.xyz/Programmering/computer-programming-languages/87354.html" title="Hur man byter rektanglar Point Oavgjort i WPF " target="_self">Hur man byter rektanglar Point Oavgjort i WPF </a></td></tr><tr></tr></table></td> </tr> </table></td> </tr> </table></td> </tr> </table></td> </tr> </table> <div class=dhang8></div> <div class=dhang1></div> <table class=b1> <tr> <td class=bs height=90 align=middle>Copyright © Dator Kunskap http://www.dator.xyz </td> </tr> </table> <div class=dhang1></div> </div> </body> </html>