鼠标移到图片变化的三种写法(可移植性强、代码少)

当鼠标移动到某个图片的时候，图片变化。当鼠标移出去的时候，图片变回来。下面是三种写法：
第一种，也是最笨，最麻烦的写法，如下：

    $(".web-footer2 .inner").each(function(){
        $(this).find("ul").eq(1).find("img").eq(0).hover(function(){
            $(this).attr("src","/img/footer-qq2.png");
        },function(){
            $(this).attr("src","/img/footer-qq.png");
        })
        $(this).find("ul").eq(1).find("img").eq(1).hover(function(){
            $(this).attr("src","/img/footer-weibo2.png");
        },function(){
            $(this).attr("src","/img/footer-weibo.png");
        })
        $(this).find("ul").eq(1).find("img").eq(2).hover(function(){
            $(this).attr("src","/img/footer-qqweibo2.png");
        },function(){
            $(this).attr("src","/img/footer-qqweibo.png");
        })
        $(this).find("ul").eq(1).find("img").eq(3).hover(function(){
            $(this).attr("src","/img/footer-weixin2.png");
        },function(){
            $(this).attr("src","/img/footer-weixin.png");
        })
    }) 

 用了each、find、eq、hover。代码重复、臃肿。而且可移植性特别差。下面是第二种

    $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){
        if(e.type=="mouseover"){
            if($(this).attr("src") == "/img/footer-qq.png"){
                $(this).attr("src","/img/footer-qq2.png")
            }else if(....){....} 
        }else if(e.type=="mouseout"){
            if($(this).attr("src") == "/img/footer-qq2.png"){
                $(this).attr("src","/img/footer-qq.png")
            }else if(....){....} 
        }
    }) 

 用了on、attr函数，虽然代码量减少，但可移植性还是特别的差。那么就有了第三种

    $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){
        var img_arr = [
        ["/img/footer-qq.png","/img/footer-qq2.png"],
        ["/img/footer-weibo.png","/img/footer-weibo2.png"],
        ["/img/footer-qqweibo.png","/img/footer-qqweibo2.png"],
        ["/img/footer-weixin.png","/img/footer-weixin2.png"]
        ];
        var img_src = $(this).attr("src");
        if(event.type=="mouseover"){
            for(i=0;i<4;i++){
                if($.inArray(img_src,img_arr[i]) !== -1){
                    if(img_src == img_arr[i][0]){
                        $(this).attr("src",img_arr[i][1]);
                    }
                }
            }
        }else if(event.type=="mouseout"){
            for(i=0;i<4;i++){
                if($.inArray(img_src,img_arr[i]) !== -1){
                    if(img_src == img_arr[i][1]){
                        $(this).attr("src",img_arr[i][0]);
                    }
                }
            }
        }
    }) 

现在我重点来说第三种，也就是这一种。先把图片变化前的路径和变化后的路径放到二维数组里(img_arr变量)，img_src其实可以不需要，我只是为了方便。然后用if判断语句，判断event.type是否 mouseover，也就是是否移到图片上，当移到图片上的时候用for循环，不用for循环的话。你移到一个图片上后，所有图片都会变。因为有4张图，所以i=0;i<4。如果你的图片不确定有多少的话，你可以设置几个变量，如下
var img_length = $(".web-footer2 .inner").find("img");  //某个元素里的图片总数。
然后改下for循环语句为for(i=0;i<img_length.length;i++) 就行了
然后再来一个if语句，判断当前鼠标移到的图片地址是否在img_arr二维数组里(如果不存在返回-1，如果存在返回在数组里的第几个)，如果存在，则再判断，当前这个图片地址是否在对应二维数组里的第一个数组里的值(这话比较难理解，就是img_arr里的"/img/footer-qq.png"、"/img/footer-weibo.png"、"/img/footer-qqweibo.png"、["/img/footer-weixin.png")如果是相对应，就把当前鼠标所在的图片改成二维数组里的第二个数组里的值，也就是("/img/footer-qq2.png"、"/img/footer-weibo2.png"、"/img/footer-qqweibo2.png"、"/img/footer-weixin2.png")