begin process at 2012 05 28 10:02:54
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > 

Code

 > 

Graphique

 > FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS

FAIRE DEFILER DES IMAGE A LA MOLETTE OU SOURIS


 Information sur la source

Note :
8 / 10 - par 2 personnes
8,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10
Catégorie :Graphique Classé sous :scroll, images, diaporama, molette, photo Niveau :Débutant Date de création :30/04/2010 Date de mise à jour :25/06/2010 18:34:36 Vu / téléchargé :7 275 / 951
Auteur : kazma

Ecrire un message privé
Commentaire sur cette source (8)
Ajouter un commentaire et/ou une note

 Description

Cliquez pour voir la capture en taille normale
il s'agit de faire defiler des images qui se trouve dans un tableau.
j'ai mis deux sources qui font la meme chose sauf que l'une le fait a la souris et l'autre a la molette
les script sont courts mais efficaces

fonctionne sur opera FF chrome et IE pour la souris a partir de IE 5.5 et pour la molette IE 6

++

Source

  • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  • <html xmlns="http://www.w3.org/1999/xhtml">
  • <head>
  • <link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
  • <script type="text/javascript">
  • function souris(s){
  • var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement
  • setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft;
  • setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop;
  • return false
  • }
  • navigator.appName.substring(0,3)=="Net" ? document.addEventListener("mousemove", souris, false) : document.attachEvent('onmousemove',function(){souris(event)});
  • function sensa(){
  • var clic=document.getElementById('clic')
  • var oml=(clic.offsetLeft+(clic.offsetWidth/2))-setX
  • clic.scrollLeft=clic.scrollLeft-(oml/10);
  • oxo=setTimeout(sensa,50)
  • }
  • function anul(){
  • clearTimeout(oxo)
  • }
  • </script>
  • </head>
  • <body>
  • <div id="clic">
  • <table id="cloc"cellspacing=2 onmouseover='sensa()' onmouseout='anul()'>
  • <tr>
  • <td><img src='images\d1.jpg'> </td>
  • <td><img src='images\d1_02.jpg'> </td>
  • <td><img src='images\d1_03.jpg'> </td>
  • <td><img src='images\d1_04.jpg'> </td>
  • <td><img src='images\d1_05.jpg'> </td>
  • <td><img src='images\d1_06.jpg'> </td>
  • <td><img src='images\d2_02.jpg'> </td>
  • <td><img src='images\d2_03.jpg'> </td>
  • <td><img src='images\d2_04.jpg'> </td>
  • <td><img src='images\d2_05.jpg'> </td>
  • <td><img src='images\d2_06.jpg'> </td>
  • <td><img src='images\d1.jpg'> </td>
  • <td><img src='images\d1_02.jpg'> </td>
  • <td><img src='images\d1_03.jpg'> </td>
  • <td><img src='images\d1_04.jpg'> </td>
  • <td><img src='images\d1_05.jpg'> </td>
  • <td><img src='images\d1_06.jpg'> </td>
  • <td><img src='images\d2_02.jpg'> </td>
  • <td><img src='images\d2_03.jpg'> </td>
  • <td><img src='images\d2_04.jpg'> </td>
  • <td><img src='images\d2_05.jpg'> </td>
  • <td><img src='images\d2_06.jpg'> </td>
  • </tr>
  • </table>
  • </div>
  • </body>
  • </html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" type="text/css" href="css/style.css" media="screen">
<script type="text/javascript">

function souris(s){
var dde=(navigator.vendor) ? document.documentElement.childNodes[1] : document.documentElement
setX =((navigator.appName.substring(0,3)=="Mic") ? event.clientX : s.clientX) + dde.scrollLeft;
setY =((navigator.appName.substring(0,3)=="Mic") ? event.clientY : s.clientY) + dde.scrollTop;
return false
}
navigator.appName.substring(0,3)=="Net" ? document.addEventListener("mousemove", souris, false) : document.attachEvent('onmousemove',function(){souris(event)});


function sensa(){

var clic=document.getElementById('clic')
var oml=(clic.offsetLeft+(clic.offsetWidth/2))-setX
clic.scrollLeft=clic.scrollLeft-(oml/10);
oxo=setTimeout(sensa,50)
}

function anul(){
clearTimeout(oxo)
}

</script>
</head>
<body>
<div id="clic">
<table id="cloc"cellspacing=2 onmouseover='sensa()' onmouseout='anul()'>
<tr>
<td><img src='images\d1.jpg'> </td>
<td><img src='images\d1_02.jpg'> </td>
<td><img src='images\d1_03.jpg'> </td>
<td><img src='images\d1_04.jpg'> </td>
<td><img src='images\d1_05.jpg'> </td>
<td><img src='images\d1_06.jpg'> </td>
<td><img src='images\d2_02.jpg'> </td>
<td><img src='images\d2_03.jpg'> </td>
<td><img src='images\d2_04.jpg'> </td>
<td><img src='images\d2_05.jpg'> </td>
<td><img src='images\d2_06.jpg'> </td>
<td><img src='images\d1.jpg'> </td>
<td><img src='images\d1_02.jpg'> </td>
<td><img src='images\d1_03.jpg'> </td>
<td><img src='images\d1_04.jpg'> </td>
<td><img src='images\d1_05.jpg'> </td>
<td><img src='images\d1_06.jpg'> </td>
<td><img src='images\d2_02.jpg'> </td>
<td><img src='images\d2_03.jpg'> </td>
<td><img src='images\d2_04.jpg'> </td>
<td><img src='images\d2_05.jpg'> </td>
<td><img src='images\d2_06.jpg'> </td>
</tr>
</table>
</div>
</body>
</html>

 Conclusion

courts mais efficace

 Fichier Zip

Les Membres Club peuvent télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip


 Historique

01 mai 2010 19:47:48 :
ajout d'une zone morte au centre
03 mai 2010 16:27:24 :
modif
25 juin 2010 18:34:38 :
remplacement de settimeout par setinterval et optimisation

 Sources du même auteur

Source avec Zip Source avec une capture BOUTON ROTATIF
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT...
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS
Source avec Zip Source avec une capture DRAG & DROP VERS UN CANVAS
Source avec Zip Source avec une capture DIAPO EN CSS 3D
Toutes les sources de kazma

 Sources de la même categorie

Source avec Zip JDMATH-MINI.JS : GÉNÉRATION D'EXPRESSION MATHÉMATIQUE par jdmcreator
Source avec une capture SPHERE 3D DÉFORMABLE par phm
Source avec Zip Source avec une capture EFFET DE ROTATION A 360° D'IMAGE AVEC ACCELERATION DECELERAT... par kazma
Source avec Zip Source avec une capture PETIT LOGICIEL DE DESSIN, RETOUCHE AVEC CANVAS par kazma
Source avec Zip Source avec une capture CALCULATRICE HEURE par m22001111
Toutes les sources de la catégorie Graphique

 Sources en rapport avec celle ci

Source avec Zip Source avec une capture CENTRAGE D'IMAGE AVEC PETIT EFFET par kazma
Source avec Zip Source avec une capture LIGHTBOX DIAPORAMA par kazma
Source avec Zip Source avec une capture CAROUSELLE 3D par kazma
Source avec Zip DIAPORAMA 360° V2 MOUVEMENT DANS LES QUATRE SENS ROTATION VA... par abdelaziz_info
Source avec Zip DIAPORAMA 360 DEGRÉ COMPLET ET TOUT AUTOMATIQUE QUATRE VITES... par abdelaziz_info

Commentaires et avis

Commentaire de Neo_Ryu le 03/05/2010 14:54:19 7/10

Sous FF 3.6.3 je n'ai pas pu utiliser la molette de souris ( récupérer à partir du zip).

Sinon suggestion (pour les utilisateurs) d'amélioration avec PHP : détection des images d'un dossier

Commentaire de kazma le 03/05/2010 16:29:58 administrateur CS

c'est bon sa fonctionne c'etait du au fait que j'utilise la version minefield de firefox et que le useragent n'est pas le meme

Commentaire de kazma le 03/05/2010 16:50:37 administrateur CS

et pour le php il faut pas abusé

Commentaire de mo5tarajala le 08/05/2010 00:46:50

salut a tous
comment je peut faire dans mon site une navigation entres les pages, comme étant un personne qui tournes des pages d'un livre, je cherche le code javascript qui permet de faire ça et merci a tous.

Commentaire de thm01db le 27/07/2010 21:38:45

J'ai un pb avec FF 3.6.8: pas d'image ! (fonctionne nickel sous IE et Chrome)

Commentaire de thm01db le 27/07/2010 22:21:49 9/10

Super facile a utiliser et tres fonctionnel

Commentaire de jefekoi le 06/03/2011 19:49:08

Salut,

Pour info si ce script fonctionne mal c'est tout simplement à cause des liens images

Si je prend le premier nous avons ça :

<td><img src='images\d1.jpg'> </td>

Au lieu de :

<td><img src='images/d1.jpg'> </td>


A+++

Commentaire de ThomasBarg le 02/06/2011 14:03:11

Bonjour,

Est-il possible d'avoir la même chose en vertical ?

Merci :)

 Ajouter un commentaire


Discussions en rapport avec ce code source dans le forum

pb scroll horizontal d'images (need help please) [ par jodje ] Salut à tous, merci déjà de vous intéresser à ce post...Voila je vous expose mon pb...J'aimerai creer une sorte de galerie d'images qui défilerait hor !!! Défi !!! recherche diaporama [ par tamtamdesign ] Bonjour,je suis nouvelle venue sur ce site (tr&#232;s int&#233;ressant).Voil&#224;, je recherche un script pour mes pages album photos.Mais comme j'ai Pb de scroll en javascript associer a des ancres... [ par chandler_vodkamartini ] Voilou, bonjour les gens...alors ptit probleme pas sympa, je travaille sur un site sur lequel on trouve deux acces a la navigation. La navigation seff lien vers photo [ par fabz01 ] Bonjour &#224; tous, Voil&#224; je suis d&#233;butant et je rame &#233;norm&#233;ment avec le javascript. j'ai un exo &#224; faire et &#231;a fait p Diaporama à partir d'un dossier [ par SCWeb ] Bonjour,Je cherche d&#233;sesp&#233;r&#233;ment un javascript qui permettrait tout simplement d'afficher un diaporama &#224; partir d'un dossier sans Diaporama [ par daddou1707 ] est ce possible de créer un diaporama qui affiche un ensemble des images situer dans un dossiers. j'ai pu faire un diaporama qui s'affiche dans un pag javascript+photo [ par yosra72000 ] Salut tout le monde   bonjour svp g besoin d'un javascript avec lequelle je pourrai manipuler deux image 2 scripts sur la même page, le 1er ne fonctionne plus [ par Mobigirl ] Bonjouuuuuuurrr à tous les fanas de javascript :-)Foilà, je fais un site amateur pour une asbl qui s'occupe de mosaïque.J'ai un script slideshow qui f diaporama aleatoire sur une page web [ par photographe62 ] Bonjour a tout le monde, j'en appelle a votre aide pour resoudre un petit probleme qui je suis persuadé ne vous fera pas peur, mais par contre pour mo scroll d'images [ par ctx_man ] Bonjour, Je cherche un moyen de faire un scrolling d'image presque identique &#224; un simple "&lt;marquee&gt;". En faisant un code comme suit il faut


Nos sponsors


Sondage...

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), Merci à Vincent pour ses précieux conseils.
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 2,200 sec (4)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)