网页中图片去色问题是什么_网页问题

网页中图片去色问题是什么_网页问题网页中图片去色问题网页中经常需要一种js效果,就是鼠标经过某张图片,图片去色。为了不加载两张图片(一张彩色和一张灰色),在网上找到了一些方法。方案一:使用grayscale.js可以使用grayscale.js来实现图片的去色,但是有个缺点就是它可以实现鼠标经过图片去色,但是实现不了鼠标移开之后,图片恢复颜色。使用demo:window.onload=function(

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新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>

效果下图:鼠标经过:

网页中图片去色问题是什么_网页问题

鼠标移开:

网页中图片去色问题是什么_网页问题

 

这样控制可以兼容chromefirefox360,但是唯一的缺点就是不兼容IE

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/185391.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

  • eclipse SVN插件_eclipse安装svn

    eclipse SVN插件_eclipse安装svn利用中文插件,我们可以更加直观的理解ecli

    2022年10月14日
  • JS中Class类的详解

    JS中Class类的详解概述    在ES6中,class(类)作为对象的模板被引入,可以通过class关键字定义类。它可以被看作一个语法糖,让对象原型的写法更加清晰、更像面向对象编程的语法。    类实际上是个“特殊的函数”,就像你能够定义的函数表达式和函数声明一样,类语法有两个组成部分:类表达式和类声明。严格模式    类和模块的内部,默认就是严格模式,所以不需要使用usestrict指定运行模式…

  • 安装程序在计算机中识别出下列大容量存储设备「建议收藏」

    安装程序在计算机中识别出下列大容量存储设备「建议收藏」今天使用USB安装2003在一台lenovo笔记本发现提示安装程序在计算机中识别出下列大容量存储设备解决方案:BIOS硬盘更改为兼容oride即可 转载于:https://blog.51cto.com/vn98z/905299…

  • oracle的todate函数的日期格式_oracle date格式

    oracle的todate函数的日期格式_oracle date格式转自http://apps.hi.baidu.com/share/detail/10070907OracleTO_DATE日期格式大全Oracle中TO_DATE格式2009-04-1410:53TO_DATE格式(以时间:2007-11-02  13:45:25为例)       Year:            yytwodigits两位年              …

    2022年10月12日
  • SCSA之信息安全概述「建议收藏」

    SCSA之信息安全概述「建议收藏」一、信息安全概述1、信息安全防止任何对数据进行未授权访问的措施,或者防止造成信息有意无意泄漏、破坏丢失等问题的发生,让数据处于远离危险、免于威胁的状态或特性。(1)网络安全计算机网络环境下的信息安全。二、信息安全的脆弱性及常见的攻击1、网络环境的开放性“INTERNET的美妙之处在于你和每个人都能互相连接,INTERNET的可怕之处在于每个人都能和你互相连接”2、…

  • pycharm导入第三方库安装包时出错_pycharm安装不了第三方库

    pycharm导入第三方库安装包时出错_pycharm安装不了第三方库PycharmAvailablePackage无法显示包的问题解决使用Pycharm的时候需要导入解释器然后安装一些第三方库,讲道理都是projectInterpreter里面直接install的。但是打开之后发现无法显示列表,也无法下载。ErrorLoadingPackageList报错Errorloadingpackagelist:connecttimedout…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号