网页中图片去色问题

以你之姓@ 2022-08-10 11:50 188阅读 0赞

网页中图片去色问题

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

方案一：使用grayscale.js

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

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

效果如下图：

没有执行函数之前：

![Center][]

执行函数之后：

![Center 1][]

方案二：使用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,<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部分：

$(document).ready(function () \{

$('\#new\_1').hover(function () \{

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

\}, function () \{