大家好，又见面了，我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。
Jetbrains全系列IDE稳定放心使用
网页中图片去色问题
网页中经常需要一种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.net/185391.html原文链接：https://javaforall.net
