這篇文章主要介紹了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法,實(shí)例分析了jQuery實(shí)現(xiàn)鼠標(biāo)特效的原理與詳細(xì)步驟,具有一定參考借鑒價(jià)值,需要的朋友可以參考下

本文實(shí)例講述了基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下：

1. 創(chuàng)建HTML：

1. <ul> 
2. <li><a href="/tv"><img src="images/tv_off.gif" class="mainnav"></a></li> 
3. </ul> 

2. 選擇.mainnav的class：

1. $(".mainnav").hover( 
2. function () { 
3. }, 
4. function () { 
5. } 
6. ); 

3. 建立變量imgPath，指定圖片SRC：

1. $(".mainnav").hover( 
2. function () { 
3. // Grab the source 
4. var imgPath = $(this).attr("src"); 
5. }, 
6. function () { 
7. // Grab the source 
8. var imgPath = $(this).attr("src"); 
9. } 
10. ); 

4. 找到字符串off，用on替換：

1. $(".mainnav").hover( 
2. function () { 
3. // Grab the source 
4. var imgPath = $(this).attr("src"); 
5. // Replace the path in the source 
6. $(this).attr("src",imgPath.replace("off", "on")); 
7. }, 
8. function () { 
9. // Grab the source 
10. var imgPath = $(this).attr("src"); 
11. // Replace the path in the source 
12. $(this).attr("src",imgPath.replace("on", "off")); 
13. } 
14. ); 

希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。