摘要：效果展示事前準備一張普通的靜態圖與其對應的圖。實現思路獲取圖片的，改變其后綴，使其變成與之對應的圖片。很簡單有木有具體實現編寫代碼最強大腦如果替換的圖片不存在則用靜態圖大開眼界智能幫手安全衛士編寫代碼改變圖片，用動圖替換。
效果展示
事前準備
一張普通的靜態圖+與其對應的gif圖。
實現思路
獲取圖片的src，改變其后綴，使其變成與之對應的gif圖片。（很簡單有木有= =）
具體實現
編寫html代碼
最強大腦
大開眼界
智能幫手
安全衛士
編寫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方法獲取的是相對路徑 ，這一步將其轉換為絕對路徑
path=on?src2.replace("."+suffix,".gif"):src2.replace(".gif","."+suffix); //將后綴改為gif or 將gif改為原來的后綴 取決于on的值
img.find("img").attr("src",path); //執行替換
}
$(".section_02_icon").hover(function(){
imgSwitch($(this),1);
},function(){
imgSwitch($(this),0);
});
代碼下載 鏈接：https://pan.baidu.com/s/1sneEbwx 密碼：u8pg
我是新手，有不足的問題希望提出。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/107447.html
