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

效果图：

页面代码：

 

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

 

posted @ 2018-03-01 15:48  super超人  阅读(4590)  评论(0)  编辑  收藏  举报