大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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。
发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185391.html原文链接:https://javaforall.cn
【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛
【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...