网页中图片去色问题

网页中图片去色问题

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

方案一：使用grayscale.js

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

<script src="http://james.padolsey.com/demos/grayscale/grayscale.js" type="text/javascript"></script>

使用demo:
<script type="text/javascript">
window.οnlοad=function(){ 
grayscale(document.body); 
}
</script> 

效果如下图：

没有执行函数之前：

 

执行函数之后：

 

 

方案二：使用css滤镜

Css样式：

 

<style type="text/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,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");    /* Firefox 3.5+ */

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

            -webkit-filter: grayscale(1);

    }

    </style>

Html部分：

 

<div>

        <img src="images/new_1.jpg" height="350px" width="350px" id="new_1">

</div>

Jquery部分：

 

<script type="text/javascript">

        $(document).ready(function () {

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

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

            }, function () {

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

            })

        })

    </script>

效果下图：鼠标经过：

鼠标移开：

 

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