cari

Rumah >hujung hadapan web >tutorial js >jQuery menyedari pengembangan gelongsor dan kesan penyembunyian mengawal gambar dengan meluncurkan tetikus ke atas link_jquery

jQuery menyedari pengembangan gelongsor dan kesan penyembunyian mengawal gambar dengan meluncurkan tetikus ke atas link_jquery

WBOY
WBOYasal
2016-05-16 15:34:571430semak imbas

Contoh dalam artikel ini menerangkan pelaksanaan jQuery untuk menggelongsorkan tetikus pada pautan untuk mengawal pengembangan gelongsor dan kesan menyembunyikan imej. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Berikut ialah demonstrasi jQuery menggerakkan tetikus ke atas pautan, meluncur untuk mengembangkan/menyembunyikan kesan imej, meletakkan tetikus pada "halaman sebelumnya" dan "halaman seterusnya", dan imej yang sepadan akan muncul serta-merta, sedikit seperti pratonton terlebih dahulu, membenarkan pengguna untuk Mengetahui halaman seterusnya atau kandungan umum halaman seterusnya meningkatkan pengalaman pengguna.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-mouse-over-link-pic-show-codes/

Kod khusus adalah seperti berikut: 

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>鼠标移动链接上，滑动展开/隐藏图片效果</title>
<script language="javascript" src="jquery1.3.2.js"></script>
<script type="text/javascript" language="javascript"> 
$(function(){
 $(".list>li:has(div)").hover(function(){
   $(this).children('a').addClass('red').end().find('div').slideDown("fast");},
  function(){
   $(this).children('a').removeClass('red').end().find('div').slideUp("fast");
  });
 });
</script>
<style>
*{margin:0;padding:0}
body{background:#F8F3ED}
li{list-style:none}
.list{height:40px;background:#fff;padding-left:100px;}
.list li{float:left;position:relative;}
.list li a{float:left;width:100px;height:40px;line-height:40px; text-align:center;color:#B7B7B7;text-decoration:none; font-family:"微软雅黑";}
.list li a:hover{background:#99C228;color:#FFF;}
.list .box{position:absolute;top:40px;left:0;display:none;width:240px;height:170px;background:#99C228;color:#FFF;}
.list .box img{width:220px;height:150px;margin:10px;}
.list li a:hover,.red{background:#99C228!important;color:#FFF!important;}
</style>
</head>
<body>
<ul class="list">
 <li><a href="javascript:;">上一页</a>
  <div class="box"><img src="images/wall_s9.jpg" /></div>
 </li>
 <li><a href="javascript:;">下一页</a>
  <div class="box"><img src="images/wall_s7.jpg" /></div>
 </li>
</ul>
</body>
</html>

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.

Kenyataan：
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
Artikel sebelumnya：JS melaksanakan kod kesan pop timbul teks bar status penyemak imbas dari kanan ke kiri_javascript kemahiranArtikel seterusnya：JS melaksanakan kod kesan pop timbul teks bar status penyemak imbas dari kanan ke kiri_javascript kemahiran

Artikel berkaitan

Lihat lagi