js調節圖片的亮度

本文轉載自查看原文 2018-03-01 15:48 2610 CSS3

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>

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 C#調節圖片亮度 (十一) UVC調節亮度 Linux——屏幕亮度調節 centos系統調節屏幕亮度 ios 通過代碼調節屏幕亮度台式電腦win10如何調節亮度？ ubuntu 無法調節並保存屏幕亮度解決辦法 C#圖像亮度對比度調節惠普電腦win10關閉自動調節亮度 Android 系統設置中顯示設置之亮度調節篇