从默认彩色化,到灰度化.

<div id="friendBox">
<a href=""><img src="http://www.mamicode.com/images/friendPic2.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2.jpg" /></a>
</div>

<script>
(function(){
    var imgs=document.getElementById("friendBox").getElementsByTagName("img"),imgs_length=imgs.length,i=0;
    var imgHover=function(theNode,theSrc){
        return function(e){
            var reg=/(?:\.jpg|\.gif|\.png)$/i;
            var result=theSrc.match(reg);
            var resultSrc="http://www.mamicode.com/_gray"+result;
            var newSrc=http://www.mamicode.com/theSrc.replace(result,resultSrc);
            theNode.setAttribute("src",newSrc);
        }
    };
    var imgOut=function(theNode,theSrc){
        return function(e){
            theNode.setAttribute("src",theSrc);
        }
    };
    
    for(i=0;i<imgs_length;i+=1){
        var imgSrc=http://www.mamicode.com/imgs[i].getAttribute("src");
        imgs[i].onmouseover=imgHover(imgs[i],imgSrc);
        imgs[i].onmouseout=imgOut(imgs[i],imgSrc);
    }
})();
</script>

从默认灰度化,到彩色化.

<div id="friendBox" class="friendBox clearfix">
<a href=""><img src="http://www.mamicode.com/images/friendPic2_gray.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2_gray.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2_gray.jpg" /></a>
<a href=""><img src="http://www.mamicode.com/images/friendPic2_gray.jpg" /></a>
<a class="last" href=""><img src="http://www.mamicode.com/images/friendPic2_gray.jpg" /></a>
</div>

<script>
(function(){
    var imgs=document.getElementById("friendBox").getElementsByTagName("img"),imgs_length=imgs.length,i=0;
    var imgHover=function(theNode,theSrc){
        return function(e){            
            var newSrc=http://www.mamicode.com/theSrc.replace(/_gray/,"");
            theNode.setAttribute("src",newSrc);
        }
    };
    var imgOut=function(theNode,theSrc){
        return function(e){
            theNode.setAttribute("src",theSrc);
        }
    };
    
    for(i=0;i<imgs_length;i+=1){
        var imgSrc=http://www.mamicode.com/imgs[i].getAttribute("src");
        imgs[i].onmouseover=imgHover(imgs[i],imgSrc);
        imgs[i].onmouseout=imgOut(imgs[i],imgSrc);
    }
})();
</script>

从默认彩色化,到灰度化.[相互转化]