jQuery melaksanakan kod kesan menu dinamik yang bertindak balas kepada perubahan latar belakang tetikus

jQuery melaksanakan kod kesan menu dinamik yang bertindak balas kepada perubahan latar belakang tetikus_jquery

WBOY

Lepaskan： 2016-05-16 15:42:04

asal

1150 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan jQuery kod kesan menu dinamik yang bertindak balas kepada perubahan latar belakang tetikus. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu dinamik jQuery yang bertindak balas kepada perubahan latar belakang tetikus. Latar belakang menu berubah selepas tetikus diletakkan agak menyusahkan. Tetapi kesannya adalah baik. Pemalam jquery yang diperkenalkan ialah versi 1.7.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-mouse-cha-bg-pic-menu-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery动态导航菜单效果</title>
<style type="text/css" media="screen">
  body{
  background-color: #333; color:#FFFFFF
  }
  a{ color:#FFCC00;}
  #menuBar{
  overflow:hidden;
  width:503px;
  height:102px;
  background: transparent url(images/bar.jpg) no-repeat scroll left top;
  margin:0 auto;
  border:10px solid #111;
  }
  #menuBar ul{
  width:380px;
  margin:0 auto;
  list-style-type: none;
  }
  #menuBar ul li{
  float:left;
  padding-right:40px;
  }
  #menuBar a{
  width:55px;
  height:102px;
  display:block;
  background: transparent url(images/logos.jpg) no-repeat scroll left top;
  padding-top:100px;
  color:#ddd;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  font-size:10pt;
  font-weight:bold;
  outline:none;
  }
  #menuBar a:hover{
  background-image:url(images/logos-over.jpg);
  }
  #menuBar a#Home{
  background-position:-67px top;
  }
  #menuBar a#About{
  background-position:-166px top;
  }
  #menuBar a#Gallery{
  background-position:-266px top;
  }
  #menuBar a#Contact{
  background-position:-373px top;
  }
 </style>
 </head>
 <body>
 <div id="menuBar">
  <ul>
  <li><a href="#" id="Home">Home</a></li>
  <li><a href="#" id="About">About</a></li>
  <li><a href="#" id="Gallery">Gallery</a></li>
  <li><a href="#" id="Contact">Contact</a></li>
  </ul>
 </div><br />
 </body>
 <script type="text/javascript" src="jquery-1.6.2.min.js"></script>
 <script type="text/javascript" charset="utf-8">
 $(document).ready(function() {
 $("a").mouseover(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"78px"}, 100);
 }).mouseout(function(){
  var selected = "#"+$(this).attr("id");
  $(selected).animate({paddingTop:"100px"}, 100);
 });
 });
 </script>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.