鼠标移到图片变化的三种写法(可移植性强、代码少)
当鼠标移动到某个图片的时候，图片变化。当鼠标移出去的时候，图片变回来。下面是三种写法：
第一种，也是最笨，最麻烦的写法，如下：
1 $(".web-footer2 .inner").each(function(){ 2 $(this).find("ul").eq(1).find("img").eq(0).hover(function(){ 3 $(this).attr("src","/img/footer-qq2.png"); 4 },function(){ 5 $(this).attr("src","/img/footer-qq.png"); 6 }) 7 $(this).find("ul").eq(1).find("img").eq(1).hover(function(){ 8 $(this).attr("src","/img/footer-weibo2.png"); 9 },function(){ 10 $(this).attr("src","/img/footer-weibo.png"); 11 }) 12 $(this).find("ul").eq(1).find("img").eq(2).hover(function(){ 13 $(this).attr("src","/img/footer-qqweibo2.png"); 14 },function(){ 15 $(this).attr("src","/img/footer-qqweibo.png"); 16 }) 17 $(this).find("ul").eq(1).find("img").eq(3).hover(function(){ 18 $(this).attr("src","/img/footer-weixin2.png"); 19 },function(){ 20 $(this).attr("src","/img/footer-weixin.png"); 21 }) 22 })
用了each、find、eq、hover。代码重复、臃肿。而且可移植性特别差。下面是第二种
1 $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){ 2 if(e.type=="mouseover"){ 3 if($(this).attr("src") == "/img/footer-qq.png"){ 4 $(this).attr("src","/img/footer-qq2.png") 5 }else if(....){....} 6 }else if(e.type=="mouseout"){ 7 if($(this).attr("src") == "/img/footer-qq2.png"){ 8 $(this).attr("src","/img/footer-qq.png") 9 }else if(....){....} 10 } 11 })
用了on、attr函数，虽然代码量减少，但可移植性还是特别的差。那么就有了第三种
1 $(".web-footer2 .inner").on("mouseover mouseout","ul:eq(1) img",function(e){ 2 var img_arr = [ 3 ["/img/footer-qq.png","/img/footer-qq2.png"], 4 ["/img/footer-weibo.png","/img/footer-weibo2.png"], 5 ["/img/footer-qqweibo.png","/img/footer-qqweibo2.png"], 6 ["/img/footer-weixin.png","/img/footer-weixin2.png"] 7 ]; 8 var img_src = $(this).attr("src"); 9 if(event.type=="mouseover"){ 10 for(i=0;i<4;i++){ 11 if($.inArray(img_src,img_arr[i]) !== -1){ 12 if(img_src == img_arr[i][0]){ 13 $(this).attr("src",img_arr[i][1]); 14 } 15 } 16 } 17 }else if(event.type=="mouseout"){ 18 for(i=0;i<4;i++){ 19 if($.inArray(img_src,img_arr[i]) !== -1){ 20 if(img_src == img_arr[i][1]){ 21 $(this).attr("src",img_arr[i][0]); 22 } 23 } 24 } 25 } 26 })
现在我重点来说第三种，也就是这一种。先把图片变化前的路径和变化后的路径放到二维数组里(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")
