萬盛學電腦網 >> 腳本專題 >> 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>javascript排行
程序編程推薦
相關文章
copyright © 萬盛學電腦網 all rights reserved