网页中图片去色问题
网页中经常需要一种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。
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/185391.html原文链接：https://javaforall.cn
