js调节图片的亮度

js调节图片的亮度：（使用CSS3的滤镜）

1.实现点亮图标、熄灭图标的效果

效果图：

页面代码：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
    String ctxPath = request.getContextPath();
    request.setAttribute("ctxpath", ctxPath);//项目根路径
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
<%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
<title>首页</title>
<style type="text/css">
/* #headTitle img {
     150px;
    height: 50px;
} */
/*灰度*/
.logo_pic { 
    -webkit-filter: grayscale(1);
    filter: grayscale(1);
    
}
/*亮度*/
.bright {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}
</style>
<script type="text/javascript">
    //初始亮度
    var brightVal = 1;
    function addBrightness() {
        /* -webkit-filter: brightness(2.3);
        filter: brightness(2.3); */

        /* brightVal = brightVal + 0.1;
        $(".logo_pic").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".logo_pic").css("filter", "brightness(" + brightVal + ")"); */
        $(".logo_pic").addClass("bright");
    }

    function reduceBrightness() {
        /* brightVal = brightVal - 0.1;
        $(".logo_pic").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".logo_pic").css("filter", "brightness(" + brightVal + ")"); */
        $(".logo_pic").removeClass("bright");
    }
</script>
</head>
<body>
    <h2 id="headTitle">
        小跑达人徽章：
        <br> 
        <img class="logo_pic" alt="腾讯官网" src="${ctxpath}/img/huizhang/huizhang2.jpg" />
    </h2>
    <a href="javascript:void(0);" onclick="addBrightness();">点亮徽章</a>
    <a href="javascript:void(0);" onclick="reduceBrightness()">熄灭徽章</a>
</body>
</html>

2.实现调节图标亮度的效果（增加亮度、减弱亮度）

效果图：

页面代码：

<!DOCTYPE html>
<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<%
    String ctxPath = request.getContextPath();
    request.setAttribute("ctxpath", ctxPath);//项目根路径
%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script src="${ctxpath}/js/jquery-1.11.3.min.js"></script>
<%-- <link href="${ctxpath}/css/main.css" rel="stylesheet"> --%>
<title>首页</title>
<style type="text/css">
/* #headTitle img {
     150px;
    height: 50px;
} */
/*灰度*/
.logo_pic { 
    /* -webkit-filter: grayscale(1);
    filter: grayscale(1); */
    
}
/*亮度*/
.bright {
    -webkit-filter: brightness(1.5);
    filter: brightness(1.5);
}

a{
    text-decoration: none;
    font-size: 25px;
}
</style>
<script type="text/javascript">
    //初始亮度
    var brightVal = 1;
    function addBrightness() {
        /* -webkit-filter: brightness(2.3);
        filter: brightness(2.3); */

        brightVal = brightVal + 0.1;
        $(".logo_pic").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".logo_pic").css("filter", "brightness(" + brightVal + ")");
        //$(".logo_pic").addClass("bright");
    }

    function reduceBrightness() {
        brightVal = brightVal - 0.1;
        $(".logo_pic").css("-webkit-filter", "brightness(" + brightVal + ")");
        $(".logo_pic").css("filter", "brightness(" + brightVal + ")");
        //$(".logo_pic").removeClass("bright");
    }
</script>
</head>
<body>
    <h2 id="headTitle">
        小跑达人徽章：
        <br> 
        <img class="logo_pic" alt="腾讯官网" src="${ctxpath}/img/huizhang/huizhang2.jpg" />
    </h2>
    <!-- <a href="javascript:void(0);" onclick="addBrightness();">点亮徽章</a>
    <a href="javascript:void(0);" onclick="reduceBrightness()">熄灭徽章</a> -->
    增加亮度:
    <a href="javascript:void(0);" onclick="addBrightness();">+</a>
    减少亮度：
    <a href="javascript:void(0);" onclick="reduceBrightness()">-</a>
</body>
</html>

相关阅读:
接口中解决默认方法冲突
 继承中的访问域问题
 继承中的多态问题
 Java中方法的调用过程
 【JS】表格获取每一列方法
 【Git报错】 ! [rejected] master -> master (fetch first)
【Vue】vue-cli配置proxyTable调用服务器接口
 layui监听多个radio事件
 【总结】display属性inline,block,inline-block
【实例总结】fixed定位元素内部滚动显示
原文地址：https://www.cnblogs.com/super-chao/p/8488811.html