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

网页中图片去色问题是什么_网页问题网页中图片去色问题网页中经常需要一种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)


相关推荐

  • Thread.IsBackground 属性

    Thread.IsBackground 属性net提供了Thread类用于线程的操作。当初始化一个线程,把Thread.IsBackground=true的时候,指示该线程为后台线程。后台线程将会随着主线程的推出而退出。后台线程不妨碍程序的终止,只要所有前台线程都终止后,CLR就会对每一个活在的后台线程调用Abort()来彻底终止应用程序。【注意】当在主线程中创建了一个线程,那么该线程的IsBackground默认是设置为FALS…

  • React 路由—基本使用「建议收藏」

    React 路由—基本使用「建议收藏」一:安装运行npmireact-router-dom安装react路由依赖项创建一个App.js根组件,并在根组件中,按需导入路由需要的三个组件HashRouter:表示路由的包裹

  • NOIP2012 借教室[通俗易懂]

    NOIP2012 借教室[通俗易懂]2借教室题目描述在大学期间,经常需要租借教室。大到院系举办活动,小到学习小组自习讨论,都需要向学校申请借教室。教室的大小功能不同,借教室人的身份不同,借教室的手续也不一样。 面对海量租借教室的信息,我们自然希望编程解决这个问题。 我们需要处理接下来n天的借教室信息,其中第i天学校有ri个教室可供租借。共有m份订单,每份订单用三个正整数描述,分别为dj,sj,tj,表示某租借

  • 深入浅出讲解Optional包装类

    深入浅出讲解Optional包装类Optional是JDK8的新特性,首先这个类是被final修饰的,并且这个类只有一个Object的超类,下面是这个类的结构。我们可以看到一共也没多少方法,所以我觉得就从这个类开始,养成阅读源码的习惯,再合适不过了。Optional的作用在写这篇博客之前,看过好多相关的资料,大体上来说这个类就是用来解决万恶的空指针异常,用来避免繁琐的!=null代码而存在的。那你也太…

  • 封装httpClient工具类进行get、post、put、delete的http接口请求,可添加请求头与参数,支持多线程

    封装httpClient工具类进行get、post、put、delete的http接口请求,可添加请求头与参数,支持多线程首先需要json以及springframework的maven依赖:<dependency><groupId>com.alibaba</groupId><artifactId>fastjson</artifactId><version>1.2.62</version></dependency>

  • 常见的计算机病毒种类有,五种常见的计算机病毒种类有哪些

    常见的计算机病毒种类有,五种常见的计算机病毒种类有哪些五种常见的计算机病毒种类有系统病毒、蠕虫病毒、木马病毒、脚本病毒、宏病毒。计算机病毒(ComputerVirus)是编制者在计算机程序中插入的破坏计算机功能或者数据的代码,能影响计算机使用,能自我复制的一组计算机指令或者程序代码。计算机病毒是人为制造的,有破坏性,又有传染性和潜伏性的,对计算机信息或系统起破坏作用的程序。它不是独立存在的,而是隐蔽在其他可执行的程序之中。计算机中病毒后,轻则影响机…

发表回复

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

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