网页中图片去色问题

网页中图片去色问题

网页中经常需要一种js效果，就是鼠标经过某张图片，图片去色。为了不加载两张图片（一张彩色和一张灰色），在网上找到了一些方法。

方案一：使用grayscale.js

可以使用grayscale.js来实现图片的去色，但是有个缺点就是它可以实现鼠标经过图片去色，但是实现不了鼠标移开之后，图片恢复颜色。

使用demo:

window.οnlοad=function(){ 
grayscale(document.body); 
}
 

效果如下图：

没有执行函数之前：

 

执行函数之后：

 

 

方案二：使用css滤镜

Css样式：

 

     .gray {

            height: 350px;

            width: 350px;

            filter: gray;  /* ie6-8 */

            filter: grayscale(1);

            filter: progid: DXImageTranorm.Microsoft.BasicImage(grayscale=1);  /*ie6-9 */

            filter: grayscale(100%);      /* 未来浏览器 */

            -webkit-filter: grayscale(100%);   /* chrome+ */

            -moz-filter: grayscale(100%);

            -ms-filter: grayscale(100%);

            -o-filter: grayscale(100%);

            filter: url("data:image/svg+xml;utf8,#grayscale");    /* Firefox 3.5+ */

            filter: progid: DXImageTransform.Microsoft.BasicImage(grayscale=1);

            -webkit-filter: grayscale(1);

    }

    

Html部分：

 

        

Jquery部分：

 

        $(document).ready(function () {

            $('#new_1').hover(function () {

                $(this).addClass('gray');

            }, function () {

                $(this).removeClass('gray');

            })

        })

    

效果下图：鼠标经过：

鼠标移开：

 

这样控制可以兼容chrome、firefox、360，但是唯一的缺点就是不兼容IE。