Heim > Web-Frontend > js-Tutorial > Methode zum Erstellen eines Mouseover-Effekts basierend auf jQuery_jquery

Methode zum Erstellen eines Mouseover-Effekts basierend auf jQuery_jquery

WBOY
Freigeben: 2016-05-16 16:11:02
Original
1434 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt, wie man einen Maus-Hover-Effekt basierend auf jQuery erstellt. Teilen Sie es als Referenz mit allen. Die spezifische Implementierungsmethode lautet wie folgt:

1. HTML erstellen:

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>
Nach dem Login kopieren

2. Wählen Sie die Klasse von .mainnav aus:

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);
Nach dem Login kopieren

3. Erstellen Sie die Variable imgPath und geben Sie den Bild-SRC an:

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  }
);
Nach dem Login kopieren

4. Suchen Sie die Zeichenfolge „off“ und ersetzen Sie sie durch „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"));
  }
);
Nach dem Login kopieren

Ich hoffe, dass dieser Artikel für alle bei der jQuery-Programmierung hilfreich sein wird.

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage