Comment créer un effet en vol stationnaire aperçu de l'image en utilisant jQuery
Tout d'abord, nous allons créer une feuille de style et nommez le fichier styles.css. puis enregistrez-le dans un sous-répertoire nommé sous le répertoire css web. Ceux-ci définissent le corps, la classe principale, la classe galerie, h1, h2, ancre, pré, image, liste non ordonnée, et les éléments de la liste, et l'identifiant de prévisualisation. Je vais décrire plus en détail plusieurs définitions de style spécifiques qu'ils appliquent à plusieurs de ces éléments ci-dessous. Le code CSS comprend également plusieurs Stylings CSS3 pour l'ombre de la boîte et l'ombre de texte; le code contenu dans la feuille de style est illustré ci-dessous:
Ensuite, nous allons mettre en place les images qui seront utilisées pour la démonstration, et ceux-ci seront contenus dans une des images nommées sous-répertoire web. Chaque image nécessite l'original, qui dans cette démonstration, sont définies sur une largeur de 400 pixels et une hauteur de 320 pixels, et les vignettes sont définies redimensionnées à 100 x 80, enregistré en tant que JPGs (ex. 1t.jpg). Les images utilisées dans cette démonstration sont clip-art (libre de droits), affiché dans la figure A.
Notez que la source du script pointe vers le sous-répertoire « js », qui est contenu dans le répertoire web. Ceci est le fichier source jQuery, qui est nécessaire pour les scripts jQuery pour exécuter dans le document.
, Nous allons créer ensuite une
Ensuite, nous allons définir les décalage x et y configurations qui définiront les réglages horizontaux et verticaux qui s'appliquent jusqu'où et dans quelle mesure le droit de la vignette l'aperçu de l'image sera affichée. L'extrait de code est affiché ci-dessous:
Le xOffset = -20 apporte la prévisualisation vers le bas de 20 pixels par rapport à la vignette, et la yOffset = 40 apporte la prévisualisation vers la droite de 40 pixels par rapport à la vignette.
L'extrait de code suivant définit la fonction de vol stationnaire ainsi que le titre de la légende; elle fixe également les compensations et le fondu pour ralentir.
Les fonctions suivantes supprimer l'aperçu et le titre de légende lorsque le vol stationnaire est en dehors de la zone d'image, ainsi que la « mousemove » qui permet l'aperçu de se déplacer le long par rapport à l'endroit où le curseur se trouve dans la miniature, et enfin, le script de fermeture marque:
La dernière galerie d'image affichée dans Chrome 18.0.1 est illustré à la figure B.
Et à côté, un exemple de l'effet de prévisualisation en vol stationnaire au-dessus de la seconde image de paysage, comme le montre la figure C.
Encore une fois, vous pouvez télécharger tous les fichiers pour cette démonstration de l'effet d'image aperçu ici.
Pour en savoir plus, consultez ces ressources: