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

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

WBOY

Lepaskan： 2016-05-16 15:34:57

asal

1373 orang telah melayarinya

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>

Salin selepas log masuk

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