快捷導(dǎo)航

基于jQuery創(chuàng)建鼠標(biāo)懸停效果的方法

更新時間：2015年03月07日 16:43:25 作者：老槍

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

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

1. 創(chuàng)建HTML：

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

2. 選擇.mainnav的class：

$(".mainnav").hover(
 function () {
 },
 function () {
 }
);

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

$(".mainnav").hover(
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 },
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 }
);

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

$(".mainnav").hover(
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 // Replace the path in the source
 $(this).attr("src",imgPath.replace("off", "on"));
 },
 function () {
 // Grab the source
 var imgPath = $(this).attr("src");
 // Replace the path in the source
 $(this).attr("src",imgPath.replace("on", "off"));
 }
);

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

您可能感興趣的文章:

相關(guān)文章

基于jquery實現(xiàn)一個滾動的分步注冊向?qū)?附源碼
使用jQuery實現(xiàn)很多很有意思的應(yīng)用效果。我們在很多網(wǎng)站注冊會員時，需要填寫注冊表單，包括登錄信息、個人聯(lián)系信息等，本文將帶您一起體驗jQuery實現(xiàn)的一個可以滾動的十分友好的分步注冊向?qū)В枰呐笥芽梢詤⒖枷?/div> 2015-08-08
頁面元素綁定jquery toggle后元素隱藏的解決方法
元素綁定jquery中的toggle后，元素隱藏，開始的時候我怎么也沒想到是這里有問題，我找了半天才發(fā)現(xiàn)是因為綁定了toggle方法
2014-03-03
jQuery實現(xiàn)基本動畫效果的方法詳解
這篇文章主要介紹了jQuery實現(xiàn)基本動畫效果的方法,結(jié)合實例形式分析了jQuery animate()方法實現(xiàn)動畫效果相關(guān)操作技巧,需要的朋友可以參考下
2018-09-09
Jquery easyui 下loaing效果示例代碼
本文為大家詳細介紹下Jquery easyui 下loaing效果具體是如何實現(xiàn)的，感興趣的各位可以參考下
2013-08-08
簡單實現(xiàn)的JQuery文本框水印插件
這篇文章主要為大家詳細介紹了簡單實現(xiàn)JQuery文本框水印插件的相關(guān)代碼，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-06-06
jquery實現(xiàn)的鼠標(biāo)拖動排序Li或Table
這篇文章主要介紹了使用jquery實現(xiàn)的鼠標(biāo)拖動排序Li或Table,需要的朋友可以參考下
2014-05-05
jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象
本文為大家介紹下jquery遍歷篩選數(shù)組的幾種方法和遍歷解析json對象的具體實現(xiàn)，感興趣的朋友不要錯過
2013-12-12
JQuery 解析多維的Json數(shù)據(jù)格式
對博客系統(tǒng)已經(jīng)做到了博客評論模塊部分了，對單篇博文進行靜態(tài)化的同時對博文的評論部分采取AJAX的方式去讀取。
2009-11-11
JQuery 獲取Dom元素的實例講解
下面小編就為大家?guī)硪黄狫Query 獲取Dom元素的實例講解。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2017-07-07
jQuery中ajax的相關(guān)知識點匯總
這篇文章主要給大家介紹了關(guān)于jQuery中ajax相關(guān)知識點的相關(guān)資料，文中通過示例代碼介紹的非常詳細，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2021-03-03