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

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 :

• 1


• 2
="# ">3

• 4


• 5


• 6


• 7
li>8

code css :

Copier le code Le le code est le suivant :

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