Maison > interface Web > js tutoriel > Méthode pour créer un effet de survol basé sur jQuery_jquery

Méthode pour créer un effet de survol basé sur jQuery_jquery

WBOY
Libérer: 2016-05-16 16:11:02
original
1434 Les gens l'ont consulté

L'exemple de cet article décrit comment créer un effet de survol de la souris basé sur jQuery. Partagez-le avec tout le monde pour votre référence. La méthode de mise en œuvre spécifique est la suivante :

1. Créer du HTML :

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>
Copier après la connexion

2. Sélectionnez la classe de .mainnav :

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);
Copier après la connexion

3. Créez la variable imgPath et spécifiez l'image SRC :

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  }
);
Copier après la connexion

4. Trouvez la chaîne off et remplacez-la par on :

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("off", "on"));
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  // Replace the path in the source
  $(this).attr("src",imgPath.replace("on", "off"));
  }
);
Copier après la connexion

J'espère que cet article sera utile à la programmation jQuery de chacun.

É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