|
|
|
| Hvordan kontrollere Scrollbars Med Javascript |
|
Siden JavaScript er en klient- side språk som kjører på vanlig nettleser, kan det brukes til å vise interaktive nettsider . JavaScript kan brukes til å kontrollere vindu rullefeltet funksjonene til en web side . Faktisk er det mulig å lage en pop -up vindu som har ingen rullefelt i det hele tatt ved hjelp av JavaScript . For JavaScript for å kunne tilby dette nivået av interaktivitet derimot , må det være knyttet til både CSS og JavaScript -filer . Instruksjoner en Åpne HTML -redigering og erklære to divs i dokumentet kalt " scrollbar " og " Scroll ". Divs er koder som definerer logiske divisjoner på websider på en nettside innhold og kan legges på samme måte som tabeller og tabellceller er lagt til. Elementene i den første rullefeltet på HTML-siden bør se slik ut : en Styre Scrollbars med JavaScript < /flis > < /head> <body> ... <div id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... plassere din rulle innhold her ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder ", " bla " , true) ;//- . > < /script > ... < /body > <br> <p> Place web siden innholdet i de to divs <br> 2 <p> Erklærer CSS og JavaScript -filer i overskriften av HTML-siden som følger : en <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 = " skjerm , projeksjon " /> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> < /script > ... < /head > <br> <p> Place elementene i den andre og andre rullefelt på HTML-siden som følger : en <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... plassere din rulle innhold her ... < /div > < /div > <script type="text/javascript"> <- ScrollLoad ( " scrollholder2 ", " scroll2 " , false) ;//- > < /script > ... <br> 3 <p> Lag " Scroll.js "-filen og kopiere følgende kode inn i filen : en <p> /* antall rullende objekter * /document.No = 0; <br> <p> Var isOpera = ( window.navigator.userAgent.indexOf ( "Opera ") > -1 ) ; <br> <p> funksjon ScrollLoad (Area , Innhold, SettingTracSize ) {var code = "var scroller " + document.No + " = new dw_scrollObj (Area , innhold, innhold, Area, document.No ); "; if ( SettingTracSize ) kode + = " scroller " + dokument . Ingen + " setBarSize (); . "; eval (kode ) ; makeMouseWheeleScrolling (Area ) ; document.No + +; } <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0 ; <br> <p> funksjon makeMouseWheeleScrolling ( objName ) {var obj = document.getElementById ( objName ) ; <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , hjul , false); } obj.onmousewheel = hjulet; } <br> <p> funksjon moveUp ( forelder ) { dw_scrollObj.initScroll ( parent.id , "opp" ); clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop (' " + parent.id + " ') ; " , 200 ) ;} <br> <p> funksjon moveDown ( forelder ) { dw_scrollObj.initScroll ( parent.id ," ned "); clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout ( " mouseStop (' "+ parent.id + " '); " , 200 ) ;} <br> <p> funksjon mouseStop ( parentId ) { dw_scrollObj.stopScroll ( parentId ) ; mouseWheelTimer = 0 ;} <br> <p> /* musehjulet funksjoner for å bla på mus hjulet efect over objekt med min js scrollbar * /funksjon håndtak (delta , forelder ) {var s = delta + " :"; if ( delta < 0 ) { if ( isOpera ) moveUp ( forelder ), elsemoveDown ( forelder ); } else { if ( isOpera ) moveDown ( forelder ), elsemoveUp ( forelder ) ;} } <br> <p> funksjon hjulet ( hendelse) {var delta = 0; ( ! hendelse) hvis hendelsen = window.event ; if ( event. wheelDelta ) { delta = event.wheelDelta/120 ; if ( window.opera ) delta = - deltaet ; } else if ( event.detail ) { delta = - event.detail /3 ;} if ( delta) håndtak (delta , dette ) ; } /* < /musehjulet rulle > * /<br> 4 <p> at alle filene er lagret i samme mappe og kjøre HTML-siden for å teste <br> <br . > <br>
<div class=ad2><script language='javascript' src='/ad/201310/4.js'></script></div>
</div>
</td>
</tr>
</table>
<table width="745" height="1" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#ecf0f4">
<tr>
<td bgcolor="#ecf0f4"></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="95%" align="center" height="26">
<tr>
<td width="51%"><p>früher ： <a class='LinkPrevArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/91225.html' >Hvordan å diagnostisere problemer med Javascript </a></li></p></td>
</tr>
<tr>
<td width="49%"> Weiter： <a class='LinkNextArticle' href='http://www.datamaskin.biz/Programmering/javascript-programming/91227.html' >Hvordan sjekke et nettsted for en JavaScript Bug </a></li></td>
</tr>
</table>
<table border="0" cellspacing="0" cellpadding="0" width="100%" height="7">
<tr>
<td></td>
</tr>
</table></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width="100%" height=7>
<tr>
<td></td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=770 align=center height=246>
<tr>
<td height=246 vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<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>Relatert Artike</strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=209>
<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.datamaskin.biz/Programmering/javascript-programming/91230.html" title="Hvordan lage en kalkulator med Javascript " target="_self">Hvordan lage en kalkulator med Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90990.html" title="Sette inn Elements Med DIV i JavaScript " target="_self">Sette inn Elements Med DIV i JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91173.html" title="Java Script Vs . PHP " target="_self">Java Script Vs . PHP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91065.html" title="Hvordan å validere en dato String i jQuery " target="_self">Hvordan å validere en dato String i jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91208.html" title="Hvordan lage Java Script " target="_self">Hvordan lage Java Script </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90979.html" title="Finne ut om et område bruker JavaScript Redirects " target="_self">Finne ut om et område bruker JavaScript Redirects </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91262.html" title="Hvordan endre en musepeker ved hjelp av javascript " target="_self">Hvordan endre en musepeker ved hjelp av javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90831.html" title="Jquery Fordeler " target="_self">Jquery Fordeler </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/90817.html" title="Hvordan endre Marker i et Google Maps API " target="_self">Hvordan endre Marker i et Google Maps API </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/javascript-programming/91226.html" title="Hvordan kontrollere Scrollbars Med Javascript " target="_self">Hvordan kontrollere Scrollbars Med Javascript </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<td vAlign=top width=20></td>
<td vAlign=top width=375>
<table class=bian border=0 cellSpacing=0 cellPadding=0 width=380>
<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>Anbefalte artikler </strong></td>
</tr>
</table>
<table border=0 cellSpacing=4 cellPadding=0 width="95%" align=center height=207>
<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.datamaskin.biz/Programmering/java-programming/90122.html" title="Slik konverterer Double til int i Java " target="_self">Slik konverterer Double til int i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/computer-programming-languages/88364.html" title="Hvordan å lage dynamiske tekstbokser " target="_self">Hvordan å lage dynamiske tekstbokser </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/perl-programming/93202.html" title="Hvordan gjøre en Twitter Stream API i Perl " target="_self">Hvordan gjøre en Twitter Stream API i Perl </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/php-mysql-programming/92405.html" title="Hvordan : PHP MySQL Escape HTML for Insert " target="_self">Hvordan : PHP MySQL Escape HTML for Insert </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/94713.html" title="Hvordan lage en VBS MsgBox Fra DOS " target="_self">Hvordan lage en VBS MsgBox Fra DOS </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89609.html" title="Hvor å Endre JVM Heap størrelse " target="_self">Hvor å Endre JVM Heap størrelse </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/89346.html" title="Hvordan få Portnummer server i Java " target="_self">Hvordan få Portnummer server i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/java-programming/90219.html" title="Hvordan finne et maksimalt antall i Java " target="_self">Hvordan finne et maksimalt antall i Java </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/python-programming/93914.html" title="Hvordan Vis Python matriser enkelt " target="_self">Hvordan Vis Python matriser enkelt </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="http://www.datamaskin.biz/Programmering/visual-basics-programming/96276.html" title="Slik konverterer tall til tekst i Visual Basic " target="_self">Slik konverterer tall til tekst i Visual Basic </a></td></tr><tr></tr></table></td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
</tr>
</table>
<table border=0 cellSpacing=0 cellPadding=0 width=980 height=8>
<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=center>Copyright © Datamaskin http://www.datamaskin.biz/
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html> | | |
