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
WBOYoriginal
2016-05-16 16:11:021416parcourir

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>

2. Sélectionnez la classe de .mainnav :

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);

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");
  }
);

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"));
  }
);

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

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