jQuery控制圖片的hover效果（smartRollover.js）
更新時(shí)間：2012年03月18日 13:43:49 作者：
圖片的hover效果可以用css來實(shí)現(xiàn)也可以用js來實(shí)現(xiàn)。典型的就是smartRollover.js
用js實(shí)現(xiàn)的好處是：如果一個(gè)網(wǎng)站中圖片的hover效果比較多，可能每一個(gè)都要有css控制，那樣代碼有的冗余。但是有了js控制，不管有多少圖片，hover效果都可以用同樣的js，但是必須保證圖片的out/off效果和over/on效果命名有規(guī)律性，比如：
navi01_out.jpg/navi01_off.jpg
navi01_over.jpg/nvai02_on.jpg
這樣js控制起來非常方便。找到匹配的名稱，hover時(shí)替換成另一個(gè)名稱。
今天我想用jQuery控制一下效果：
代碼如下：
<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ī)律
navi01_out.jpg/navi01_off.jpg
navi01_over.jpg/nvai02_on.jpg
這樣js控制起來非常方便。找到匹配的名稱，hover時(shí)替換成另一個(gè)名稱。
今天我想用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ī)律
您可能感興趣的文章:
- 基于JS如何實(shí)現(xiàn)類似QQ好友頭像hover時(shí)顯示資料卡的效果(推薦)
- JS組件Bootstrap dropdown組件擴(kuò)展hover事件
- JavaScript實(shí)現(xiàn)為input與textarea自定義hover,focus效果的方法
- javascript解決IE6下hover問題的方法
- js模仿hover的具體實(shí)現(xiàn)代碼
- js hover 定時(shí)器(實(shí)例代碼)
- js操作css屬性實(shí)現(xiàn)div層展開關(guān)閉效果的方法
- 詳解Javascript動(dòng)態(tài)操作CSS
- JS操作CSS隨機(jī)改變網(wǎng)頁背景實(shí)現(xiàn)思路
- 使用js操作css實(shí)現(xiàn)js改變背景圖片示例
- JS實(shí)現(xiàn)css hover操作的方法示例
相關(guān)文章
有時(shí)候我們在前端開發(fā)工作中為了獲取圖片的信息，需要在圖片加載完成后才可以正確的獲取到圖片的大小尺寸，并且執(zhí)行相應(yīng)的回調(diào)函數(shù)使圖片產(chǎn)生某種顯示效果。本文主要整理了幾種常見的jquery判斷圖片加載完成時(shí)的方法2015-08-08
用jQuery實(shí)現(xiàn)的模仿a的title屬性的例子，在測試的時(shí)候ie6,7上出現(xiàn)了層次混亂，不過最終解決了,代碼書寫很詳細(xì)，感興趣的朋友可以了解下哦2013-01-01
jQuery中$.each的用法，學(xué)習(xí)jquery的朋友可以參考下。2010-03-03
這篇文章主要為大家詳細(xì)介紹了基于jquery實(shí)現(xiàn)日歷效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細(xì)介紹了jQuery內(nèi)存泄露解決辦法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-12-12
IE中jquery.form中ajax提交沒反應(yīng)解決方法分享
用jquery form插件，進(jìn)行ajax提交，本來可以用，好好地，突然發(fā)現(xiàn)，firefox，opera等可以提交，ie的success函數(shù)運(yùn)行了2012-09-09
jquery實(shí)現(xiàn)的網(wǎng)頁自動(dòng)播放聲音
這篇文章主要介紹了使用jquery如何實(shí)現(xiàn)的網(wǎng)頁自動(dòng)播放聲音,需要的朋友可以參考下2014-04-04
這篇文章主要介紹了jQuery 選擇器詳解,圖文并茂，十分不錯(cuò)，需要的朋友可以參考下2015-01-01
詳談jQuery操縱DOM元素屬性 attr()和removeAtrr()方法
這篇文章主要詳細(xì)介紹了jQuery操縱DOM元素屬性 attr()和removeAtrr()方法，非常的全面細(xì)致，在這里推薦給小伙伴們。2015-01-01
div拖動(dòng)效果想必大家都有見到過吧，實(shí)現(xiàn)的方法也是有很多的，下面為大家將介紹使用jquery是如何實(shí)現(xiàn)的，感興趣的朋友不要錯(cuò)過2013-12-12