Faire defiler des image a la molette ou souris

Soyez le premier à donner votre avis sur cette source.

Vue 13 661 fois - Téléchargée 1 470 fois

Description

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 / Exemple :


<!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

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Fonctionne impeccablement avec FF mais rien à faire pour safari !
J'utilise avec la molette : la vitesse de défilement est un peu lente ou saccadée ( en jouant sur le pas de déplacement). En tout cas, très bon script !
ThomasBarg
Messages postés
2
Date d'inscription
mercredi 23 septembre 2009
Statut
Membre
Dernière intervention
1 juin 2011

Bonjour,

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

Merci :)
Jefekoi
Messages postés
52
Date d'inscription
mardi 19 mars 2002
Statut
Membre
Dernière intervention
7 avril 2019

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> </td>

Au lieu de :

<td> </td>

A+++
thm01db
Messages postés
2
Date d'inscription
mardi 26 décembre 2000
Statut
Membre
Dernière intervention
27 juillet 2010

Super facile a utiliser et tres fonctionnel
thm01db
Messages postés
2
Date d'inscription
mardi 26 décembre 2000
Statut
Membre
Dernière intervention
27 juillet 2010

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

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.