Dator > hur man styr rullningslister med javascript

  • hur man styr rullningslister med javascript


  • Eftersom JavaScript är ett klientsidan språk som körs på den gemensamma webbläsaren , kan det användas för att visa interaktiva webbsidor . JavaScript kan användas för att styra funktioner fönster scrollbar på en webbsida. I själva verket är det möjligt att skapa ett popup- fönster som har rullningslister ingen alls med hjälp av JavaScript. För att JavaScript för att erbjuda denna nivå av interaktivitet måste dock vara kopplat till både CSS och JavaScript -filer
    1

    Öppna din HTML-redigerare ansökan och förklara 2 divs i dokumentet " rullningslist " och " Rulla . " divar är taggar som definierar logiska indelningar på webbsidor på en webbsida innehåll och kan läggas på samma sätt som tabeller och tabellceller tillsätts De delar av första rullningslisten på HTML -sidan skulle se ut så här : .



    Styra rullningslister med JavaScript </kakel > <br/> </head> <br/> <body> <br />. . . <br /> <div id="scrollholder" class="scrollholder"> <br/> <div id="scroll" class="scroll"> <br/> . . placera ditt rullning innehåll här . . . <br/> </div > <br/> </div> <br/> <script type="text/javascript"> <br/> <!--<br /> ScrollLoad ( " scrollholder " , " bläddra " , true ) ; <br/> //--><br /> </script> <br/> . . . <br/> </body > <br /> <br/> Placera innehållet webbsida i 2 divs <br> 2 <br> avvisa CSS och JavaScript -filer i huvudet på HTML- sidan enligt följande:. <br/> <br /> <head> <br/> . . . <br/> <link rel=" stylesheet " type=" text /css " href=" scroll. css " mce_href=" scroll. css " media=" skärmen , "=språk " projektion " /> <br/> <script type="text /javascript JavaScript " src="scroll . js " mce_src=" scroll. js " > </script> <br/> . . . <br/> </head> <br/> <br/> Placera element i den andra och andra rullningslister på HTML- sidan enligt följande : <br/> <br/> . . . <br/> <div id="scrollholder2" class="scrollholder"> <br/> <div id=" scroll2 " class=" bläddra " > <br/> . . . placera din rullning innehåll här . . . <br/> </div > <br/> </div > <br/> <script type="text /javascript " > <br/> <!--<br /> ScrollLoad ( " scrollholder2 " , " scroll2 " , false ) ; <br/> //--><br /> </script > <br />. . . <br > <br> 3 . <br> Skapa " Scroll. js " filen och kopiera in följande kod i filen : <br/> <br/> /* antal rulla objekt * /<br/> document. No=0 ; <br /> <br/> var isOpera=( window. navigator. userAgent. indexOf ( " Opera " ) > -1 ) ; <br/> <br/> funktion ScrollLoad (område , Innehåll , SettingTracSize ) <br/> { <br/> var code=" var scroller " + document. No + "=ny dw_scrollObj (område , Innehåll , Innehåll , Area , document. No );";<br /> om ( SettingTracSize ) <br/> kod +=" scroller " + document. No + " setBarSize ();";<br /> eval ( kod ) . <br/> makeMouseWheeleScrolling ( område ) , <br/> dokument . Nr + + ; } <br/> <br/> <br/> /* <Mouse wheele scrolling> * /<br/> var mouseWheelTimer=0 ; <br/> <br/> funktion makeMouseWheeleScrolling ( objName ) <br /> { <br/> var obj=document. getElementById ( objName ) , <br/> <br/> om ( obj. addEventListener ) <br/> { <br/> obj. addEventListener ( " DOMMouseScroll " , hjul , falska ) ; } <br/> <br/> obj. onmousewheel=hjul , <br/> } <br/> <br/> funktion moveUp ( förälder ) <br/> { <br/> dw_scrollObj. initScroll ( parent. id , " upp ") ; <br/> clearInterval ( mouseWheelTimer ) , <br/> mouseWheelTimer=setTimeout ( " mouseStop ( ' " + förälder . ID + "');", 200 ) ; } <br/> <br/> <br/> funktion moveDown ( förälder ) <br/> { <br/> dw_scrollObj. initScroll ( parent. id , "down" ) ; <br/> clearInterval ( mouseWheelTimer ) , <br/> mouseWheelTimer=setTimeout ( " mouseStop ( ' " + parent. id + "');", 200 ) ; } <br/> <br/> <br/> funktion mouseStop ( parentId ) <br/> { <br/> dw_scrollObj. stopScroll ( parentId ) , <br/> mouseWheelTimer=0 ; } <br/> <br/> <br/> /hjul * musfunktioner att bläddra på mushjulet EFECT över objektet med min js rullningslisten * /<br/> funktion handtag ( Delta, förälder ) <br/> { <br/> var s=Delta + " : " ; <br/> om ( delta <0 ) <br/> { <br/> om ( isOpera ) <br/> moveUp (förälder); <br/> annars <br/> moveDown (förälder); } <br/> <br/> annan <br /> { <br/> om ( isOpera ) <br/> moveDown (förälder); <br/> annars <br/> moveUp (förälder); <br/> } } <br/> <br/> <br /> funktion hjul ( händelse ) <br/> { <br/> var deltat=0 ; <br/> om event=fönster ( händelse ! ) . händelse ; <br/> om ( event. wheelDelta ) <br/> { <br/> delta=event. wheelDelta/120 , <br/> om ( window. opera ) delta=- delta , <br/> } <br /> else if ( event. detail ) <br/> { <br/> delta=- event. detail /3 ; <br/> } <br/> om (delta ) <br/> handtaget ( Delta, detta ) ; } <br/> <br/> /* </mushjulet rullning > * /<br> 4 <br> Se till att alla dina filer sparas i samma mapp och kör HTML . sidan för att testa . <br> <h4> tips och varningar </h4> <br> <li> Fler funktioner kan läggas till som framgår av den Gondo Webbdesigners hemsida ( se Resurser ) . </Li> </p></div></UL><br> <table> <tr> <td><script type="text/javascript" src="/boot.js"> </script></td> <td><script type="text/javascript" src="/boot.js"> </script></td> </tr> </table> <p> Previous:<a href='/2/2013/03/Vilka-Ur-fordelarna-med-Java-uppgradera-.html'>Vilka är fördelarna med Java uppgradera ?</a> Next:<a href='/2/2014/07/hur-man-kan-kontrollera-en-hemsida-for-ett-javascript-fel.html'>hur man kan kontrollera en hemsida för ett javascript fel</a> </p><br><br> <!-- AddThis Button BEGIN --> <div class="addthis_toolbox addthis_default_style addthis_32x32_style"> <a class="addthis_button_preferred_1"></a> <a class="addthis_button_preferred_2"></a> <a class="addthis_button_preferred_3"></a> <a class="addthis_button_preferred_4"></a> <a class="addthis_button_compact"></a> <a class="addthis_counter addthis_bubble_style"></a> </div> <script type="text/javascript">var addthis_config = {"data_track_clickback":true};</script> <script type="text/javascript" src="http://s7.addthis.com/js/250/addthis_widget.js"></script> <!-- AddThis Button END --> <br><br> <h1>Relaterade artiklar</h1><br> <li><a href="/2/2014/07/hur-du-gor-din-egen-php-proxy.html">hur du gör din egen php proxy</a></li> <li><a href="/2/2011/12/hur-man-laddar-EPSON-Smart-Panel.html">hur man laddar EPSON Smart Panel</a></li> <li><a href="/2/2012/10/iMac-5521-specifikationer.html">iMac 5521 specifikationer</a></li> <li><a href="/2/2014/07/Hur-konvertera-fran-strUng-till-Kort-datum-i-Java.html">Hur konvertera från sträng till Kort datum i Java</a></li> <li><a href="/2/2012/08/Radeon-9550-128MB-specifikationer.html">Radeon 9550 128MB specifikationer</a></li> <li><a href="/2/2012/11/hur-du-partitionerar-ett-program.html">hur du partitionerar ett program</a></li> <li><a href="/2/2012/08/bUrbara-harddisk-typer.html">bärbara hårddisk typer</a></li> <li><a href="/2/2014/07/hur-man-kan-felsoka-Visual-Studio-6-pa-vista.html">hur man kan felsöka Visual Studio 6 på vista</a></li> <li><a href="/2/2012/09/Hur-du-sUtter-en-diskett-till-en-extern-harddisk.html">Hur du sätter en diskett till en extern hårddisk</a></li> <li><a href="/2/2012/10/hur-man-anvUnder-en-bUrbar-dator-att-vUga-objekt.html">hur man använder en bärbar dator att väga objekt</a></li> </DIV></DIV> <DIV class=mod id=more-news> <DIV class=bd> </DIV></DIV> </DIV></DIV> <DIV class=yui-b id=sidebar> <DIV class="mod ult-section mod-first" id=yn-most-popular> <DIV class="bd pagination" style="border:none;"> <UL class=tabs> <H3>senaste artikel</H3></UL><DIV class=pagination-bd> <DIV id=pagination-bd-most-popular__1755_5> <UL class="list list4 size2" style="line-height:150%;"> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-styr-rullningslister-med-javascript.html">hur man styr rullningslister med javascript</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-kan-kontrollera-en-hemsida-for-ett-javascript-fel.html">hur man kan kontrollera en hemsida för ett javascript fel</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-Undrar-ordningen-pa-rader-i-en-tabell-for-MySQL.html">hur man ändrar ordningen på rader i en tabell för MySQL</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-berUknar-javascript.html">hur man beräknar javascript</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/ANPA-till-XML-konvertering.html">ANPA till XML-konvertering</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-skapar-ett-rutnUt-i-Java.html">hur man skapar ett rutnät i Java</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-gor-html-aktivera-javascript.html">hur man gör html aktivera javascript</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/Ta-bort-fran-en-tabell-i-atkomst-med-Visual-Basic.html">Ta bort från en tabell i åtkomst med Visual Basic</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-ska-vUrdera-ett-uttalande-i-COBOL.html">hur man ska värdera ett uttalande i COBOL</A> </LI> <LI class="ult-position first"><A class=showtt href="/2/2014/07/hur-man-skriver-berUkningsformler-i-Visual-Basic.html">hur man skriver beräkningsformler i Visual Basic</A> </LI> </UL></DIV></DIV></DIV></DIV> <script type="text/javascript" src="/gg160_90.js"> </script> <DIV class="mod ad ad_sidebar"> <DIV class=bd> <TABLE class=ad_slug_table cellSpacing=0 cellPadding=0 border=0> <TBODY> <TR> <TD align=middle></TD></TR></TBODY></TABLE></DIV></DIV> <DIV class="mod ult-section" id=yn-featured> <DIV id=pagination-bd-most-popular__1755_5> <H3>slumpmässiga artikeln</H3></DIV> <DIV class=bd> <UL class="list list4 size2" style="line-height:150%;"> <LI class="ult-position first"><a href="/2/2012/09/hur-du-atervinner-Kyocera-blUckpatroner-mita-toner.html">hur du återvinner Kyocera bläckpatroner mita toner</a></LI> <LI class="ult-position first"><a href="/2/2012/02/hur-du-tar-bort-pappersfacket-pa-en-HP-5650.html">hur du tar bort pappersfacket på en HP 5650</a></LI> <LI class="ult-position first"><a href="/2/2012/01/Hur-du-donerar-skrivare-blUck-i-Richmond-VA.html">Hur du donerar skrivare bläck i Richmond, VA</a></LI> <LI class="ult-position first"><a href="/2/2014/07/hur-man-skapar-Visual-Basic-applikationer-att-variera-stavningen-av-ett-ord.html">hur man skapar Visual Basic-applikationer att variera stavningen av ett ord</a></LI> <LI class="ult-position first"><a href="/2/2014/06/UML-diagram-forklaras.html">UML-diagram förklaras</a></LI> <LI class="ult-position first"><a href="/2/2012/09/hur-att-reparera-indb-filtillUgget.html">hur att reparera indb filtillägget</a></LI> <LI class="ult-position first"><a href="/2/2012/11/hur-man-anvUnder-en-VGA-skUrm-for-att-visa-hdtv.html">hur man använder en VGA-skärm för att visa hdtv</a></LI> <LI class="ult-position first"><a href="/2/2012/10/Toshiba-nb205-n310-bn-specifikationer.html">Toshiba nb205-n310/bn specifikationer</a></LI> <LI class="ult-position first"><a href="/2/2012/11/hur-man-spegel-ut-pa-min-Canon-PIXMA.html">hur man spegel ut på min Canon PIXMA</a></LI> <LI class="ult-position first"><a href="/2/2014/07/hur-man-skapar-en-XML-fil-fran-en-databas-med-vb.html">hur man skapar en XML- fil från en databas med vb</a></LI> <LI class="ult-position first"><a href="/2/2012/11/hur-man-anvUnder-Logitech-omloppsbana.html">hur man använder Logitech omloppsbana</a></LI> <LI class="ult-position first"><a href="/2/2012/02/hur-du-tar-bort-BIOS-losenord-pa-en-Toshiba-A210-19t.html">hur du tar bort BIOS-lösenord på en Toshiba A210-19t</a></LI> <LI class="ult-position first"><a href="/2/2012/01/hur-man-anvUnder-hk-ExpressCard-Digital-analog-TV-mottagare-att-se-en-video-ingang.html">hur man använder hk ExpressCard Digital / analog TV-mottagare att se en video-ingång</a></LI> <LI class="ult-position first"><a href="/2/2012/09/hur-du-ansluter-en-mini-Mac-till-en-HDMI-anslutning.html">hur du ansluter en mini Mac till en HDMI-anslutning</a></LI> <LI class="ult-position first"><a href="/2/2014/07/hur-man-arbetar-med-en-Visual-Basic-kombinationsruta.html">hur man arbetar med en Visual Basic kombinationsruta</a></LI> </UL></DIV></DIV> <DIV class="mod ult-section" id=yn-videos> <DIV class=hd> <H3>Artikel toppen</H3></DIV> <DIV class=bd> <UL> </UL></DIV></DIV> <script type="text/javascript" src="/end.js"> </script> </DIV> <DIV class="mod ad dynamic_ad" id=dynamic-ad__LREC2></DIV></DIV></DIV> <DIV id=ft> <DIV class="ult-section nav" id=yn_ft_nav> </DIV> </div> <DIV class="mod ad ad_footer"> <DIV class=bd> <DIV id=copyright>Copyright © 2011 All rights reserved. Besöksadress: Hålabäcks fritidsgård, Blomstergatan 2, 424 43 Kungsbacka . Email:dator8_info@gmail.com </DIV></DIV></DIV> </BODY></HTML>