jquery簡(jiǎn)單實(shí)現(xiàn)鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖

更新時(shí)間：2013年12月17日 15:12:36 作者：

鼠標(biāo)經(jīng)過(guò)導(dǎo)航條改變背景圖的效果很是好看，下面為大家介紹下使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友可以參考下

 
<!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>維護(hù)中...</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="#">首頁(yè)</a></li> 
<li><a href="#">首頁(yè)</a></li> 
<li><a href="#">首頁(yè)</a></li> 
<li><a href="#">首頁(yè)</a></li> 
<li><a href="#">首頁(yè)</a></li> 
<li><a href="#">首頁(yè)</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> 

您可能感興趣的文章:

相關(guān)文章

jQuery對(duì)象的selector屬性用法實(shí)例
這篇文章主要介紹了jQuery對(duì)象的selector屬性用法,實(shí)例分析了selector屬性返回選擇器的使用技巧,具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
2014-12-12
詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用
這篇文章主要介紹了詳解JavaScript中jQuery和Ajax以及JSONP的聯(lián)合使用,jQuery庫(kù)和Ajax異步結(jié)構(gòu)以及JSON數(shù)據(jù)傳輸也是JS日常編程中最常用到的東西,需要的朋友可以參考下
2015-08-08
jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法
這篇文章主要介紹了jQuery循環(huán)遍歷子節(jié)點(diǎn)并獲取值的方法,涉及jQuery節(jié)點(diǎn)的遍歷與屬性操作相關(guān)技巧,需要的朋友可以參考下
2016-04-04
文本框只能選擇數(shù)據(jù)到文本框禁止手動(dòng)輸入
文本框只能上人家選擇數(shù)據(jù)進(jìn)去，不能手動(dòng)輸入，經(jīng)搜索研究發(fā)現(xiàn)個(gè)不錯(cuò)的解決方法，感興趣的朋友可以參考下
2013-11-11
jQuery頁(yè)面加載初始化常用的三種方法
當(dāng)頁(yè)面打開(kāi)時(shí)我們需要執(zhí)行一些操作，下面為大家介紹三種不錯(cuò)的方法，大家可以參考下
2014-06-06
jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼
這篇文章主要介紹了jquery實(shí)現(xiàn)漂亮的二級(jí)下拉菜單代碼,涉及jquery鼠標(biāo)click事件控制頁(yè)面class屬性動(dòng)態(tài)變換效果的切換技巧,非常美觀實(shí)用,需要的朋友可以參考下
2015-08-08
jquery 卷簾效果實(shí)現(xiàn)代碼(不同方向)
卷簾效果在生活中應(yīng)用比較廣泛，因?yàn)樗囊曈X(jué)效果比較不錯(cuò)，本文用代碼實(shí)現(xiàn)一個(gè)，感興趣的朋友不妨了解一下，或許對(duì)你學(xué)習(xí)jquery有所幫助,好了話不多說(shuō)切入正題
2013-02-02
JQuery中綁定事件（bind()）和移除事件（unbind()）
本文主要向大家詳細(xì)介紹了jQuery的綁定事件和移除事件的使用方法和示例分享，這里推薦給有需要的小伙伴們參考下。
2015-02-02
jQuery讀取XML文件的方法示例
這篇文章主要介紹了jQuery讀取XML文件的方法,結(jié)合實(shí)例形式分析了jQuery基于ajax針對(duì)xml文件的讀取操作相關(guān)技巧,需要的朋友可以參考下
2017-02-02
javascript錯(cuò)誤的認(rèn)識(shí)不用關(guān)心內(nèi)存管理
因?yàn)槔厥盏拇嬖冢宩avascript等高級(jí)語(yǔ)言開(kāi)發(fā)者產(chǎn)生了一個(gè)錯(cuò)誤的認(rèn)識(shí)，以為可以不用關(guān)心內(nèi)存管理,需要的朋友可以了解下
2012-12-12