萬盛學電腦網

 萬盛學電腦網 >> 腳本專題 >> javascript >> jquery簡單實現鼠標經過導航條改變背景圖

jquery簡單實現鼠標經過導航條改變背景圖

 鼠標經過導航條改變背景圖的效果很是好看,下面為大家介紹下使用jquery是如何實現的,感興趣的朋友可以參考下

代碼如下: <!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=utf-8" />  <title>維護中...</title>  <style>  *{  margin:0;  padding:0;  }  body{  text-align:center;  background:yellow;  }  #container{  width:962px;  height:auto;  background:url(b3.jpg);  margin:0px auto;  }  #head{  height:100px;  width:100%;  }  .head_ul{  list-style:none;  margin-left:200px;  }  .head_ul li{  float:left;  width:90px;  height:50px;  line-height:40px;  font-size:20px;  margin-top:40px;  background:url(b1.png);  }  .head_ul li a{  text-decoration:none;  }    #main{  width:100%;  height:1500px;  }  #left{  width:30%;  height:100%;  float:left;  }  #right{  width:70%;  height:100%;  float:left;  }  #clear{  clear:both;  }  #foot{  height:100px;  width:100%;  }    </style>  <script src="jquery-1.7.2.js"></script>  <script>  $(function(){  $(".head_ul li").hover(function(){  $(this).css('background','url(b2.png)');  },function(){  $(this).css('background','url(b1.png)');  }  );  });    </script>  </head>  <body>  <div id="container">  <div id="head">  <ul class="head_ul">  <li><a href="#">首頁</a></li>  <li><a href="#">首頁</a></li>  <li><a href="#">首頁</a></li>  <li><a href="#">首頁</a></li>  <li><a href="#">首頁</a></li>  <li><a href="#">首頁</a></li>  </ul>  </div>    <div id="main">  <div id="left"></div>  <div id="right"></div>  <div id="clear"></div>  </div>    <div id="foot"></div>  </div  </body>  </html>   
copyright © 萬盛學電腦網 all rights reserved