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

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

相关推荐

  • EXT 4 文件系统新特性

    EXT 4 文件系统新特性

  • TP5.0 excel 导入导出

    TP5.0 excel 导入导出

    2021年10月13日
  • 两种Ajax写法_js调用java方法

    两种Ajax写法_js调用java方法Ajax:(AsynchronousJavascriptAndXML)简称为异步的js和xmljs中有两种写法://原生js写法functionshow(){varxhr=newXMLHttpRequest();xhr.onreadystatechange=function(){if(xhr.readyState==4&amp;&amp;xhr.status==200){…

  • ImageMagick 的安装及使用

    ImageMagick 的安装及使用一、什么是Imagemagick?ImageMagick是一款免费开源的图片编辑软件。既可以通过命令行使用,也可以通过C/C++、Perl、Java、PHP、Python或Ruby调用库编程来完成。

  • 程序员在外包公司工作怎么样呢_从外包公司出来好找工作吗

    程序员在外包公司工作怎么样呢_从外包公司出来好找工作吗    今天刚刚好是周六,本来是可以好好休息的,计划好要去哪里玩的,但是天有不测风云,突然说银行领导要来检查,今天周末大家必须和平时一样照常上班,天呐!大哭!也无奈,只能照常上班咯,谁让别人是地主呢?我经常看到帖子上说或者论坛上大家在讨论程序员在外包公司工作怎么样?福利待遇好吗?工作累吗?上班时间怎么样?等等总之一堆一堆的,现在下班回家闲来无事,我就来说说在外包公司工作到底怎么样?是一种什么样的感觉?大家想不想听呢?那就让我慢慢道来…  &n

  • Java后端学习路线图,你真的只需要这一张!

    Java后端学习路线图,你真的只需要这一张!原文链接前言学习路线图往往是学习一样技术的入门指南。网上搜到的Java学习路线图也是一抓一大把。今天我只选一张图,仅此一图,足以包罗Java后端技术的知识点。所谓不求最好,但求最全,学习Java后端的同学完全可以参考这张图进行学习路线安排。当然,有一些知识点是可选的,并不是说上面有的你都要会啦。我在复习秋招的过程中就是基于此图进行复习的,感觉效果还是不错的。闲言少叙,我们还…

发表回复

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

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