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>