Implémentation d'un effet de commutation d'image piloté par la molette de la souris basé sur jquery_jquery

jQuery peut produire des effets d'animation comparables à Flash. Cela ne fait aucun doute. Cet article démontrera un effet de changement d'image basé sur la molette de la souris à travers un exemple.

L'effet obtenu dans cet exemple :
L'image change lorsque la molette de la souris défile.
Prend en charge les touches fléchées du clavier pour obtenir des effets de commutation d'image.
Prend en charge le clic pour changer d'image et le clic sur le lien de l'image actuelle.
Le curseur de la barre de progression affiche la progression du nombre d'images.
XHTML

<div class="demo"> 
 <div id="imageflow"> 
 <div id="Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery"><img src="/static/imghw/default1.png"  data-src="images/loader.gif"  class="lazy" alt="Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery" /></div> 
 <div id="captions"></div> 
 <div id="images"> 
 <img src="/static/imghw/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s2.jpg"  class="lazy" alt="image2" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s3.jpg"  class="lazy" alt="image3" /> 
 <img src="/static/imghw/default1.png"  data-src="images/s4.jpg"  class="lazy" alt="image4" /> 
 </div> 
 <div id="scrollbar"> 
 <div id="slider"></div> 
 </div> 
 </div> 
</div> 

div.demo est le calque le plus externe et contient tous les éléments nécessaires à l'ensemble de l'effet de défilement. #imageflow est obligatoire, et le nom ID de l'élément qu'il contient ne peut pas être modifié. Si vous souhaitez vraiment le modifier, vous devez d'abord définir ou modifier directement le code JS . #Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery est utilisé pour charger une image d'animation de chargement. Bien sûr, vous pouvez également écrire directement "Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery" ou autre texte. #captions permet d'afficher la légende de l'image. #imagesPlacez les images que vous souhaitez faire défiler et changez. Il n'y a pas de limite au nombre. #scrollbar est une barre de progression qui affiche des images. #slider est un curseur Lorsque vous changez d'image, le curseur glisse vers la position correspondante pour afficher le nombre d'images.
CSS

.demo { width:860px; height:300px; margin:20px auto; position:relative; background:#e8f5fe; overflow:hidden } 
#images { margin:20px 0 0 60px; width:860px } 
#images img { position:absolute; margin-top:-160px } 
#Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery { margin:0; color:#fff; text-align:center } 
#Implémentation dun effet de commutation dimage piloté par la molette de la souris basé sur jquery_jquery img { position:ralative; margin:0 } 
#captions { position:relative; height:24px; line-height:24px; top:100px; left:320px; background:url(images/cap_bg.png) no-repeat center center; color:#fff; font-weight:bold; text-align:center; z-index:10000 } 
#scrollbar { position:relative; top:-100px; height:2px; z-index:10001 background:#abcd3a url(images/scroll.gif) repeat-x; 
} 
#slider { position:absolute; width:15px; height:4px; margin:-1px 0 0 -1px; background:url(images/bar.gif) no-repeat; z-index:10002 } 

CSS est l'élément clé pour obtenir l'ensemble de l'effet Si le CSS n'est pas bien contrôlé, vous n'obtiendrez pas l'effet souhaité.
.demo définit la largeur et la hauteur, et définit la position:relative et overflow:hidden afin de limiter la portée du défilement de la molette de la souris au .demo. #images définit la valeur de la marge et définit le positionnement relatif de l'image interne. #captions définit le style utilisé pour afficher le titre de l'image. Notez que j'utilise l'image semi-transparente cap_bg.png comme image d'arrière-plan. Les images png transparentes ne sont pas prises en charge sous IE6. donc vous Un traitement pertinent est requis. Examinons ensuite les paramètres de la barre de progression et du curseur de défilement. Ils utilisent tous des paramètres de positionnement et de profondeur. Ce n'est que si vous les testez lentement que vous connaîtrez le secret.
Présentez la bibliothèque jquery et le fichier js coulissant

<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/imageflow.js"></script> 

Toutes les actions js sont terminées dans imageflow.js. Je n'ai apporté que de légères modifications et tout le monde peut l'utiliser directement.
Maintenant, vous pouvez voir l'effet. Mais il y a toujours un problème :
Comment obtenir l'adresse du lien photo ?
L'effet final devrait être que lorsque vous cliquez sur l'image actuellement affichée, vous serez connecté à une page pour afficher des informations détaillées liées à l'image. Alors comment obtenir cette adresse de lien ? Il y a deux lignes de code à partir de la ligne 252 :

image.url = image.getAttribute("longdesc"); 
image.ondblclick = function() { document.location = this.url; } 

On peut voir que l'adresse du lien de l'image provient de son attribut : longdesc Lorsque l'on clique sur l'image, la page passe à la page d'adresse correspondante. Eh bien, maintenant que nous revenons au code XHTML avec lequel nous avons commencé, il nous suffit d'attribuer l'attribut longdesc à chaque image et de définir la valeur sur l'adresse de la page Web correspondante. Tel que :

<img src="/static/imghw/default1.png"  data-src="images/s1.jpg"  class="lazy" alt="image1" longdesc="#" /> 

Maintenant, la tâche est terminée. Après avoir lu cet exemple, vous constaterez que vous n'avez besoin d'aucun code jquery, car imageflow a déjà complété tous les codes d'opération.

Ce qui précède représente l’intégralité du contenu de cet article, j’espère qu’il sera utile à l’étude de chacun.