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 {

    width: 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.实现调节图标亮度的效果（增加亮度、减弱亮度）

效果图：

js调节图片的亮度-LMLPHP

页面代码：

<!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 {

    width: 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>