hvordan man styrer rullebjælker med javascript

Indlæg af Gunner Poulsen     opdateret: 2011-08-22

Da JavaScript er et client- side sprog , som kører på de fælles browser , kan det være ansat til at vise interaktive websider . JavaScript kan bruges til at styre vindue scrollbar elementer i en webside . Faktisk er det muligt at skabe en pop -up- vindue , der har ingen scrollbars på alle ved hjælp af JavaScript . For JavaScript for at tilbyde dette niveau af interaktivitet men det er nødvendigt at være knyttet til både CSS og JavaScript-filer
1

Åbn din HTML -editor ansøgning og erklærer 2 divs i dokumentet hedder " scrollbar " og "Rulle . " divs er tags , der definerer en logisk opdeling på websider inden for en webside indhold og kan tilføjes på samme måde som tabeller og tabelceller tilsættes De elementer i den første rullebjælken på HTML-siden skal se sådan ud : .



Controlling scrollbars med JavaScript </klinker > <br/> </head > <br/> <body> <br />. . . <br /> <div id="scrollholder" class="scrollholder"> <br/> <div id="scroll" class="scroll"> <br/> . . placerer din rulle indhold her . . . <br/> </div > <br/> </div > <br/> <script type="text/javascript"> <br/> <!--<br /> ScrollLoad ( " scrollholder " , " rulle " , true) ; <br/> //--><br /> </script > <br/> . . . <br/> </body> <br /> <br/> Placer webside indhold i de 2 divs <br> 2 <br> Erklær CSS og JavaScript filer i headeren af HTML- side som følger : . <br/> <br /> <head> <br/> . . . <br/> <link rel=" stylesheet " type="text /css " href=" scroll. css " mce_href=" scroll. css " medier=" skærmen, "=sprog " projektion " /> <br/> <script type="text /javascript JavaScript " src=" rulle . js " mce_src=" scroll. js " > </script > <br/> . . . <br/> </head > <br/> Placer elementer i den anden og andre rullebjælker på HTML-siden som følger : <br/> . . . <br/> <div id="scrollholder2" class="scrollholder"> <br/> <div id=" scroll2 " class=" rulle " > <br/> . . . placerer din rulle indholdet her . . . <br/> </div > <br/> </div > <br/> <script type="text /javascript " > <br/> <!--<br /> ScrollLoad ( " scrollholder2 " , " scroll2 " , false ) ; <br/> //--><br /> </script > <br />. . . <br > <br> 3 . <br> Opret " Scroll. js "fil og kopiere følgende kode i filen: <br/> /* Antallet af rulle genstande * /<br/> document. No=0 ; <br /> <br/> var isOpera=( window. navigator. userAgent. indexOf ( " Opera " ) > -1 ) ; <br/> funktion ScrollLoad (Område , Indhold , SettingTracSize ) <br/> { <br/> var kode=" var scroller " + document. No + "=nye dw_scrollObj (Område , Indhold , Indhold , Område , document. No );";<br /> hvis ( SettingTracSize ) <br/> kode +=" scroller " + document. No + " setBarSize ();";<br /> eval ( kode ) . <br/> makeMouseWheeleScrolling ( Samarbejdsområde) <br/> dokument . Ingen + + ; <br/> } <br/> /* <Mouse wheele scrolling> * /<br/> var mouseWheelTimer=0 ; <br/> funktion makeMouseWheeleScrolling ( objName ) <br /> { <br/> var obj=document. getElementById ( objName ) <br/> hvis ( obj. addEventListener ) <br/> { <br/> obj. addEventListener ( " DOMMouseScroll " , hjul , falsk ) <br/> } <br/> obj. onmousewheel=hjul <br/> } <br/> funktion moveUp ( forælder ) <br/> { <br/> dw_scrollObj. initScroll ( parent. id , " op ") ; <br/> clearInterval ( mouseWheelTimer ) <br/> mouseWheelTimer=setTimeout ( " mouseStop ( ' "+ forælder . id + "');", 200) ; <br/> } <br/> funktion moveDown ( forælder ) <br/> { <br/> dw_scrollObj. initScroll ( parent. id , " ned " ) ; <br/> clearInterval ( mouseWheelTimer ) <br/> mouseWheelTimer=setTimeout ( " mouseStop ( ' "+ parent. id + "');", 200) ; <br/> } <br/> funktion mouseStop ( parentId ) <br/> { <br/> dw_scrollObj. stopScroll ( parentId ) <br/> mouseWheelTimer=0 ; <br/> } <br/> /* musehjulet funktioner til at rulle på musehjulet indvirket over objekt med min js scrollbar * /<br/> funktion håndtag ( delta , forældre ) <br/> { <br/> var s=delta + " : " ; <br/> if ( delta <0 ) <br/> { <br/> hvis ( isOpera ) <br/> moveUp ( forælder ) ; <br/> ellers <br/> moveDown ( forælder ) ; <br/> } <br/> andet <br /> { <br/> hvis ( isOpera ) <br/> moveDown ( forælder ) ; <br/> ellers <br/> moveUp ( forælder ) ; <br/> } <br/> } <br/> <br /> funktion hjul ( begivenhed ) <br/> { <br/> var delta=0 ; <br/> hvis event=vindue ( begivenhed ! ) . begivenhed ; <br/> hvis ( event. wheelDelta ) <br/> { <br/> delta=event. wheelDelta/120 ; <br/> hvis ( window. opera ) delta=- delta ; <br/> } <br /> else if ( event. detail ) <br/> { <br/> delta=- event. detail /3 ; <br/> } <br/> hvis ( delta ) <br/> håndtag ( delta , dette ) <br/> } <br/> /* </musehjulet rulning > * /<br> 4 <br> Sørg for at alle dine filer er gemt i samme mappe og kør HTML . side for at teste . <br> <h4> gode råd og advarsler </h4> <br> <li> Flere funktioner kan tilføjes som det fremgår af Gondo Web Designers hjemmeside ( se Resources ) . </li > </div> <script type="text/javascript" src="/js4.js"></script> <br><br> <p> Previous:<a href='/Java/2011/06/hvordan-du-installerer-Java-API.html'>hvordan du installerer Java API</a> Next:<a href='/Java/2011/08/hvordan-man-kan-kontrollere-en-hjemmeside-for-en-javascript-fejl.html'>hvordan man kan kontrollere en hjemmeside for en javascript fejl</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 --> <DIV class=breaker> </DIV> <H3 class=italic>Kommentarer</H3> <dd> <div class="dede_comment_post"> <form action="#" method="post" name="feedback"> <input type="hidden" name="dopost" value="send" /> <input type="hidden" name="comtype" value="comments"> <input type="hidden" name="aid" value="40169" /> <input type="hidden" name="fid" id='feedbackfid' value="0" /> <div class="dcmp-content"> <textarea cols="60" name="msg" rows="5" class="ipt-txt"></textarea> </div><!-- /dcmp-content --> <div class="dcmp-post"> <div class="dcmp-userinfo" id="_ajax_feedback"> Code:<input type='text' name='validate' size='4' class='ipt-txt' /> <input type="checkbox" name="notuser" id="dcmp-submit-guest" /><label for="dcmp-submit-guest" /></label> </div> <img src="/include/vdimgck.php" id="validateimg" style=\"cursor:pointer\" onclick="this.src=this.src+'?'" title="change" alt="change" /> <div class="dcmp-submit"> <button type="button" onClick='PostComment()'>send</button> </div> </div> </form> </div> </dd> </dl> </div> <div class="mt1"> <dl class="tbox"> <dd id='commetcontentNew'></dd> <dd id='commetcontent'></dd> </dl> </div> <script language='javascript'> function LoadCommets(page) { var taget_obj = document.getElementById('commetcontent'); var waithtml = "<div style='line-height:50px'><img src='/images/loadinglit.gif' />...</div>"; var myajax = new DedeAjax(taget_obj, true, true, '', 'x', waithtml); myajax.SendGet2("/plus/feedback_ajax.php?dopost=getlist&aid=40169&page="+page); DedeXHTTP = null; } function PostComment() { var f = document.feedback; var nface = '6'; var nfeedbacktype = 'feedback'; var nvalidate = ''; var nnotuser = ''; var nusername = ''; var npwd = ''; var taget_obj = $DE('commetcontentNew'); var waithtml = "<div style='line-height:30px'><img src='/images/loadinglit.gif' />send...</div>"; if(f.msg.value=='') { alert("Kommentere indholdet kan ikke være tomt!"); return; } if(f.validate) { if(f.validate.value=='') { alert("Udfyld venligst koden"); return; } else { nvalidate = f.validate.value; } } if(f.msg.value.length > 500) { alert("din kommentar er for lang? Udfyld venligst i kommentarfeltet på 500 ord eller mindre"); return; } if(f.feedbacktype) { for(var i=0; i < f.feedbacktype.length; i++) if(f.feedbacktype[i].checked) nfeedbacktype = f.feedbacktype[i].value; } if(f.face) { for(var j=0; j < f.face.length; j++) if(f.face[j].checked) nface = f.face[j].value; } if(f.notuser.checked) nnotuser = '1'; if(f.username) nusername = f.username.value; if(f.pwd) npwd = f.pwd.value; var myajax = new DedeAjax(taget_obj, false, true, '', '', waithtml); myajax.sendlang = 'utf-8'; myajax.AddKeyN('dopost', 'send'); myajax.AddKeyN('aid', '40169'); myajax.AddKeyN('fid', f.fid.value); myajax.AddKeyN('face', nface); myajax.AddKeyN('feedbacktype', nfeedbacktype); myajax.AddKeyN('validate', nvalidate); myajax.AddKeyN('notuser', nnotuser); myajax.AddKeyN('username', nusername); myajax.AddKeyN('pwd', npwd); myajax.AddKeyN('msg', f.msg.value); myajax.SendPost2('/plus/feedback_ajax.php'); f.msg.value = ''; f.fid.value = 0; if(f.validate) { if($DE('validateimg')) $DE('validateimg').src = "/include/vdimgck.php?"+f.validate.value; f.validate.value = ''; } } function quoteCommet(fid) { document.feedback.fid.value = fid; } LoadCommets(1); </script> <DIV class=clear> </DIV></DIV></DIV> <DIV style="MARGIN: 0px auto" id=footer> <P class=center><A href="http://www.pcfly.info/Privacy.html">Privacy Policy</A> | <A href="http://www.pcfly.info/Terms.html">Vilkår</A> | <A href="http://www.pcfly.info/contact.html">Kontakt</A>|<A href="http://www.pcfly.info/sitemap.xml">sitemap</A>|<A href="http://www.pcfly.info/data/rssmap.html">RSS</A> </P> <P class=center>© pcfly.info</P></DIV></TD></TR></TBODY></TABLE> <script type="text/javascript" src="/js5.js"></script> </BODY></HTML>