|
|
|
| Comment contrôler les barres de défilement avec JavaScript |
|
Depuis JavaScript est un langage côté client qui s'exécute sur le navigateur commun , il peut être utilisé pour afficher des pages Web interactives . JavaScript peut être utilisé pour contrôler les fenêtres caractéristiques défilement d'une page web. En fait, il est possible de créer une fenêtre pop-up qui n'a pas de barres de défilement du tout en utilisant JavaScript. Pour JavaScript pour offrir ce niveau d'interactivité cependant, il doit être lié aux deux fichiers CSS et JavaScript. Instructions 1 Ouvrez votre application d'édition HTML et déclarer 2 div dans le document intitulé « scrollbar » et « Scroll ». Divs sont des balises qui définissent divisions logiques sur des pages web au sein d'un contenu d'une page web et peuvent être ajoutés de la même manière que les tables et les cellules de la table sont ajoutés. Les éléments de la première barre de défilement dans la page HTML devrait ressembler à ceci :
Contrôle Scrollbars avec JavaScript < /tile > </head> <body> <div ... id="scrollholder" class="scrollholder"> <div id="scroll" class="scroll"> ... Placez le contenu de défilement ici ... </div> </div> <script type="text/javascript"> <! - ScrollLoad ( " scrollholder ", " scroll" , true) ;//- . > </script > ... < /body> Photos <p> Placez le contenu de la page web dans les 2 divs <br> 2 <p> déclarer les fichiers CSS et JavaScript dans l'en-tête de la page HTML comme suit: <br> <p> <head> ... <link rel = de type "stylesheet " = " text /css" href = " scroll.css " mce_href = " scroll.css " media = " screen , projection "/> <script type="text/javascript" language="JavaScript" src="scroll.js" mce_src="scroll.js"> </script> ... </head> Photos <p> place les éléments de la deuxième et autres barres de défilement dans la page HTML comme suit: <br> <p> ... <div id="scrollholder2" class="scrollholder"> ; <div id="scroll2" class="scroll"> ... Placez le contenu de défilement ici ... </div> </div> <script type="text/javascript"> <! - ScrollLoad ( " scrollholder2 ", " scroll2 ", false ) ;//-> </script> ... <br> 3 <p> Créer le fichier " Scroll.js " et copiez le code suivant dans le fichier : Photos <p> /* nombre d'objets de défilement * /document.No = 0; <br> <p> var isOpera = ( window.navigator.userAgent.indexOf ( "Opera ")> -1) ; <br> fonction <p> ScrollLoad (Zone , Content, SettingTracSize ) {var code = " var scroller " + document.No + " = new dw_scrollObj ( salon, contenu, contenu , salon, document.No ) ; " ; if ( SettingTracSize ) Code + = " scroller " + documents . no + " setBarSize (); ". ; eval ( code) ; makeMouseWheeleScrolling (Région) ; document.No + +; } <br> <p> /* <Mouse wheele scrolling> * /var mouseWheelTimer = 0; <br> fonction <p> makeMouseWheeleScrolling ( objName ) {var obj = document.getElementById ( objName ) ; <br> <p> if ( obj.addEventListener ) { obj.addEventListener ( " DOMMouseScroll " , roue, false); } obj.onmousewheel = roue ; } <br> fonction moveUp <p> (parent) { dw_scrollObj.initScroll ( parent.id , "up" ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout (" mouseStop ( " "+ parent.id +" ' ) ; " , 200) ; } <br> fonction moveDown <p> (parent) { dw_scrollObj.initScroll ( parent.id , " down " ) ; clearInterval ( mouseWheelTimer ) ; mouseWheelTimer = setTimeout (" mouseStop ( " " + parent.id + " '); " , 200) ; } <br> fonction mouseStop <p> ( parentId ) { dw_scrollObj.stopScroll ( parentId ) ; mouseWheelTimer = 0; } <br> <p> /* fonctions de la molette de la souris pour faire défiler la souris efect de roue sur l'objet avec mon js scrollbar * /function poignée ( delta , parent ) {var s = delta + ":" if ( delta <0 ) {if ( isOpera ) moveUp (parent) ; elsemoveDown (parent) ;} else { if ( isOpera ) moveDown (parent) ; elsemoveUp (parent) ;}} <br> roue de la fonction <p> ( event) { var delta = 0; ( ! cas ) si l'événement = window.event ; if ( Event. wheelDelta ) {delta = event.wheelDelta/120 ; if ( window.opera ) = delta - delta ; } else if ( event.detail ) {delta = - event.detail /3; } if ( delta) poignée ( delta, cette );} /* < défilement de roue /souris > * /<br> 4 <p> S'assurer que tous vos fichiers sont sauvegardés dans le même dossier et exécuter la page HTML pour tester <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>Previous ： <a class='LinkPrevArticle' href='/programmation/javascript-programming/91225.html' >Comment diagnostiquer les problèmes avec Javascript </a></li></p></td>
</tr>
<tr>
<td width="49%"> next ： <a class='LinkNextArticle' href='/programmation/javascript-programming/91227.html' >Comment vérifier un site Web pour un Bug JavaScript </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"> articles connexes </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="/programmation/javascript-programming/90912.html" title="Comment vérifier si DIV obtenu Focus Javascript " target="_self">Comment vérifier si DIV obtenu Focus Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/90899.html" title="Effets séquentielles dans jQuery " target="_self">Effets séquentielles dans jQuery </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/90937.html" title="Comment faire pivoter le texte avec JavaScript " target="_self">Comment faire pivoter le texte avec JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91087.html" title="Comment écrire un script IE Timed " target="_self">Comment écrire un script IE Timed </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91023.html" title="Comment vérifier un espace blanc avec Javascript " target="_self">Comment vérifier un espace blanc avec Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91247.html" title="Tutoriel sur les menus déroulant en JavaScript " target="_self">Tutoriel sur les menus déroulant en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/90966.html" title="Comment Timeout en JavaScript " target="_self">Comment Timeout en JavaScript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91220.html" title="Comment faire pour intégrer Windows Media Player en Javascript " target="_self">Comment faire pour intégrer Windows Media Player en Ja…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91224.html" title="Comment configurer Apache pour Javascript " target="_self">Comment configurer Apache pour Javascript </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/javascript-programming/91006.html" title="Comment savoir combien d' images sont dans un div avec JavaScript " target="_self">Comment savoir combien d' images sont dans un div avec …</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">articles en vedette </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="/programmation/cc-programming/85214.html" title="Différence entre fgetc et getc " target="_self">Différence entre fgetc et getc </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87627.html" title="Binaires Calcul Trucs et astuces " target="_self">Binaires Calcul Trucs et astuces </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/96363.html" title="Comment trier en Visual Basic " target="_self">Comment trier en Visual Basic </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/php-mysql-programming/92036.html" title="Comment faire une recherche entre deux dates avec PHP & MySQL Code " target="_self">Comment faire une recherche entre deux dates avec PHP &…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/cc-programming/85699.html" title="Comment construire une file d'attente dans une liste " target="_self">Comment construire une file d'attente dans une liste </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/87292.html" title="Comment exécuter un script en Lua " target="_self">Comment exécuter un script en Lua </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/computer-programming-languages/86407.html" title="Comment faire pour extraire un tableau de DMP " target="_self">Comment faire pour extraire un tableau de DMP </a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/95853.html" title="Comment ajouter plusieurs lignes à un champ de type chaîne dans Visual Basic " target="_self">Comment ajouter plusieurs lignes à un champ de type ch…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/python-programming/93579.html" title="Comment exécuter des applications Java à partir de Python " target="_self">Comment exécuter des applications Java à partir de Py…</a></td></tr><tr><td width="10" valign="top" class="">·</td><td class=""><a class="" href="/programmation/visual-basics-programming/94693.html" title="Comment utiliser un ensemble de cordes en VB.NET " target="_self">Comment utiliser un ensemble de cordes en VB.NET </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 © Connaissances Informatiques http://fr.wingwit.com
<script language='javascript' src='/ad/201310/1.js'></script></td>
</tr>
</table>
</div>
</body>
</html>
| | |
