L'effet de mise à l'échelle des photos jQuery n'affecte pas la disposition des autres éléments_jquery

J'ai déjà vu cet effet spécial sur Internet, mais malheureusement je n'ai pas enregistré l'URL à l'époque, donc je ne savais pas comment cet effet spécial était obtenu. J'ai délibérément cherché sur Internet aujourd'hui et, bien sûr, je l'ai trouvé.

J'ai aussi fait de gros efforts et essayé d'écrire :

Mais ce n'était qu'un simple agrandissement de l'image, et cela affectait aussi la disposition des éléments autour de l'image (car l'agrandissement de l'image l'image prend plus de place).

Plus tard, j'ai découvert que l'objectif pouvait être atteint en utilisant les attributs de débordement et de position de manière flexible et habile. En fait, je pense que le débordement et la position (par ailleurs haut, bas, gauche, droite) en CSS (CSS3) sont simplement une combinaison insoluble pour les effets spéciaux des pages Web. Bien sûr, js (jquery) est le patron.

Après avoir dit tant de bêtises, tout le monde doit encore être confus : de quel genre d'effet spécial s'agit-il ? Hélas, ma capacité d'expression linguistique est encore très moyenne. Je vais prendre une capture d'écran pour l'illustrer ci-dessous :

Voici l'apparence initiale de la page web à son ouverture :

Lorsque la souris survole 6 Lorsque vous cliquez sur l'une des images, les effets spéciaux dont j'ai parlé apparaîtront (ici je pose la souris sur la troisième image à titre d'exemple) :

Vous trouverez que l'image est réduite, et lorsque la souris est placée Lorsque vous ouvrez l'image, vous avez l'impression qu'elle a été à nouveau agrandie (revenue à l'état initial), sans phénomène de débordement d'image, et cela n'affecte pas la disposition des autres des images et des éléments.

Le code est affiché ci-dessous :

Copiez le code Le code est le suivant :

< ;!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">



javascript" src="js /jquery.min.js">

pic">

/a>

jpg"/>

href="#"> ;

pic">



< /div>

Déclaration：

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