jQuery控制圖片的hover效果（smartRollover.js）

更新時間：2012年03月18日 13:43:49 作者：

圖片的hover效果可以用css來實現(xiàn)也可以用js來實現(xiàn)。典型的就是smartRollover.js

用js實現(xiàn)的好處是：如果一個網(wǎng)站中圖片的hover效果比較多，可能每一個都要有css控制，那樣代碼有的冗余。但是有了js控制，不管有多少圖片，hover效果都可以用同樣的js，但是必須保證圖片的out/off效果和over/on效果命名有規(guī)律性，比如：
navi01_out.jpg/navi01_off.jpg
navi01_over.jpg/nvai02_on.jpg
這樣js控制起來非常方便。找到匹配的名稱，hover時替換成另一個名稱。

今天我想用jQuery控制一下效果：
代碼如下：

復(fù)制代碼代碼如下:

 
<script type="text/javascript"> 
$(function() { 
var $img = $("img"); 
$img.hover(function() { 
$(this).attr("src",$(this).attr("src").replace("_out","_over")); 
},function() { 
$(this).attr("src",$(this).attr("src").replace("_over","_out")); 
}); 
}); 
</script> 

$img可以由你指定，你可以指定成其它的
比如： var $img = $("img.imgover"); 表示所有img的class為imgover的圖片
其它的可以根據(jù)你的需求來。但必須保證圖片的命名有規(guī)律

您可能感興趣的文章:

hover

相關(guān)文章

jQuery 判斷圖片是否加載完成方法匯總
有時候我們在前端開發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應(yīng)的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見的jquery判斷圖片加載完成時的方法
2015-08-08
用jquery模仿的a的title屬性(兼容ie6/7)
用jQuery實現(xiàn)的模仿a的title屬性的例子，在測試的時候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細，感興趣的朋友可以了解下哦
2013-01-01
jQuery $.each的用法說明
jQuery中$.each的用法，學(xué)習(xí)jquery的朋友可以參考下。
2010-03-03
基于jquery實現(xiàn)日歷效果
這篇文章主要為大家詳細介紹了基于jquery實現(xiàn)日歷效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-03-03
jQuery內(nèi)存泄露解決辦法
這篇文章主要為大家詳細介紹了jQuery內(nèi)存泄露解決辦法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2016-12-12
IE中jquery.form中ajax提交沒反應(yīng)解決方法分享
用jquery form插件，進行ajax提交，本來可以用，好好地，突然發(fā)現(xiàn)，firefox，opera等可以提交，ie的success函數(shù)運行了
2012-09-09
jquery實現(xiàn)的網(wǎng)頁自動播放聲音
這篇文章主要介紹了使用jquery如何實現(xiàn)的網(wǎng)頁自動播放聲音,需要的朋友可以參考下
2014-04-04
jQuery 選擇器詳解
這篇文章主要介紹了jQuery 選擇器詳解,圖文并茂，十分不錯，需要的朋友可以參考下
2015-01-01
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細致，在這里推薦給小伙伴們。
2015-01-01
jquery div拖動效果示例代碼
div拖動效果想必大家都有見到過吧，實現(xiàn)的方法也是有很多的，下面為大家將介紹使用jquery是如何實現(xiàn)的，感興趣的朋友不要錯過
2013-12-12