Rumah > hujung hadapan web > tutorial js > Kaedah untuk mencipta kesan alih tetikus berdasarkan jQuery_jquery

Kaedah untuk mencipta kesan alih tetikus berdasarkan jQuery_jquery

WBOY
Lepaskan: 2016-05-16 16:11:02
asal
1432 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara mencipta kesan tuding tetikus berdasarkan jQuery. Kongsikan dengan semua orang untuk rujukan anda. Kaedah pelaksanaan khusus adalah seperti berikut:

1. Cipta HTML:

<ul>
<li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li>
</ul>
Salin selepas log masuk

2. Pilih kelas .mainnav:

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);
Salin selepas log masuk

3. Cipta imgPath pembolehubah dan nyatakan imej SRC:

$(".mainnav").hover(
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
 },
 function () {
  // Grab the source
  var imgPath = $(this).attr("src");
  }
);
Salin selepas log masuk

4. Cari rentetan dimatikan dan gantikannya dengan pada:

$(".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"));
  }
);
Salin selepas log masuk

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan