摘要：效果展示事前準備一張普通的靜態(tài)圖與其對應(yīng)的圖。實現(xiàn)思路獲取圖片的，改變其后綴，使其變成與之對應(yīng)的圖片。很簡單有木有具體實現(xiàn)編寫代碼最強大腦如果替換的圖片不存在則用靜態(tài)圖大開眼界智能幫手安全衛(wèi)士編寫代碼改變圖片，用動圖替換。
效果展示
事前準備
一張普通的靜態(tài)圖+與其對應(yīng)的gif圖。
實現(xiàn)思路
獲取圖片的src，改變其后綴，使其變成與之對應(yīng)的gif圖片。（很簡單有木有= =）
具體實現(xiàn)
編寫html代碼
最強大腦
大開眼界
智能幫手
安全衛(wèi)士
編寫js代碼
//改變圖片src，用gif動圖替換。
var suffix = "";
function imgSwitch(img,on){
var src_png = img.children("img")[0].src; //獲取圖片src
if(on){ //判斷isHover 如果是hover，則獲得圖片后綴，不是則反之
suffix=src_png.substring(src_png.lastIndexOf(".")+1,src_png.length); //得到后綴
}
var src1 = src_png.indexOf("/img");
var src2 = src_png.substring(src1+1); //因為.src方法獲取的是相對路徑 ，這一步將其轉(zhuǎn)換為絕對路徑
path=on?src2.replace("."+suffix,".gif"):src2.replace(".gif","."+suffix); //將后綴改為gif or 將gif改為原來的后綴 取決于on的值
img.find("img").attr("src",path); //執(zhí)行替換
}
$(".section_02_icon").hover(function(){
imgSwitch($(this),1);
},function(){
imgSwitch($(this),0);
});
代碼下載 鏈接：https://pan.baidu.com/s/1sneEbwx 密碼：u8pg
我是新手，有不足的問題希望提出。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/107447.html
