Maison > interface Web > js tutoriel > jq implémente une souris cool sur le défilement de l'image effect_jquery

jq implémente une souris cool sur le défilement de l'image effect_jquery

WBOY
Libérer: 2016-05-16 16:55:43
original
1195 Les gens l'ont consulté

En un peu plus de dix lignes de code, un code de défilement d'image sympa est implémenté. Il n'est pas difficile d'obtenir cet effet tant que l'idée est bonne, tout est facile à gérer. Sans plus tarder, passons directement au code. voyez l'effet!

Structure HTML :

Copier le code Le code est le suivant :




code css :


*{ margin:0; padding:0;}
.list{ width:640px margin:100px auto; ;}
.list li{ float:left; width:150px; height:hidden; list-style:none; display:inline;}
.list li img{ float:left width:150px; height:80px; border:none;}
.list li{ position:absolute left:0; 999 ; marge-haut : 40 px ; affichage : inline ; text-align : center ; hauteur de ligne : 80px ; couleur : #fff ; code (note pour présenter jq Library) :



Copier le code
Le code est le suivant : $(function () { $('.list li').hover(function () { $(this).children('a,img').stop();
$( this).children('img') .stop().animate({ 'marginTop': 40, 'height': 0 }, 200, function () {
$(this).siblings('a') .stop().animate({ 'hauteur' : 80, 'marginTop' : 0 }, 200);

}, function () {
$(this). enfants('a,img'). stop();
$(this).children('a').stop().animate({ 'hauteur' : 0, 'marginTop' : 40 }, 200, function () {
$( this).siblings('img').stop().animate({ 'marginTop' : 0, 'hauteur' : 80 }, 200

}) ; ;
});

});


Est-ce juste quelques codes jq simples ? Cher, autant le copier et voir l'effet !
Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal