Faire defiler des image a la molette ou souris

Télécharger le projet
Commenter

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
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

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.

Du même auteur (@karamel)