摘要：效果展示事前准备一张普通的静态图与其对应的图。实现思路获取图片的，改变其后缀，使其变成与之对应的图片。很简单有木有具体实现编写代码最强大脑如果替换的图片不存在则用静态图大开眼界智能帮手安全卫士编写代码改变图片，用动图替换。
效果展示
事前准备
一张普通的静态图+与其对应的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
我是新手，有不足的问题希望提出。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/107447.html
