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>

js调节图片的亮度的更多相关文章

  1. C# 调节图片亮度

    原文地址:https://www.cnblogs.com/wjr408/p/6727118.html 昨天去客户那里测试,需求才开始,所以很简单,就是测一下能不能接受到视频或图片,然后保存下来,现场客 ...

  2. 前端设计——js实现图片切换的淡入淡出

    1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...

  3. android开发之GestureDetector手势识别（调节音量、亮度、快进和后退）

    写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...

  4. Android 调节图片工具类

    package com.base.changeimage; import android.graphics.Bitmap; import android.graphics.Canvas; import ...

  5. js简单 图片版时钟，带翻转效果

    js简单 图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...

  6. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  7. js压缩图片base64长度

    var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...

  8. unity, 调节图片导入尺寸

    unity中直接导入高清图,通过max size来调节图片尺寸. 打包的时候通过看editor log或通过插件来监视是否有过大尺寸的图片.

  9. ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传

    说在前面 最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

随机推荐

  1. windows服务更改配置文件

    现场部署的服务所在文件夹内容如上图所示,由于现场数据库服务器更改了IP,所以我服务里的数据库连接字符串也需要修改(注意到日志文件,从某天改了IP后就再也连不上数据库了) 修改过程: 1.打开服务管理, ...

  2. Sentry: Python 实时日志平台

    Links https://docs.getsentry.com/on-premise/quickstart/ https://docs.getsentry.com/on-premise/server ...

  3. SQL Server-聚焦使用索引和查询执行计划

    前言 上一篇我们讲了聚集索引对非聚集索引的影响,对数据库一直在强调的性能优化,所以这一节我们统筹讲讲利用索引来看看查询执行计划是怎样的,简短的内容,深入的理解,Always to review the ...

  4. pgpool中定义的数据库节点及pgpool支持的复制模式

    /* * The first DB node id appears in pgpool.conf or the first "live" DB * node otherwise.  ...

  5. js正则获取html字符串指定的dom元素和内容

    var str = "<div>111<p id='abc'>3333</p></div><div>222<div id=' ...

  6. 路飞学城Python-Day19（Py_Notes）

    # 先定义类 class LuffyStudent: school = 'luffy' def learn(self): print('学习使我快乐') def eat(self): print('吃 ...

  7. TensorFlow+实战Google深度学习框架学习笔记（5）----神经网络训练步骤

    一.TensorFlow实战Google深度学习框架学习 1.步骤: 1.定义神经网络的结构和前向传播的输出结果. 2.定义损失函数以及选择反向传播优化的算法. 3.生成会话(session)并且在训 ...

  8. HDU 1222 Wolf and Rabbit（ 简单拓欧 ）

    链接:传送门 题意:狼抓兔子,狼从 0 出发沿逆时针寻找兔子,每走一步的距离为 m ,所有洞窟的编号为 0 - n-1 ,问是否存在一个洞窟使得兔子能够安全躲过无数次狼的搜捕. 思路:简单的拓展欧几里 ...

  9. [读书笔记] R语言实战 （四） 基本数据管理

    1. 创建新的变量 mydata<-data.frame(x1=c(2,2,6,4),x2=c(3,4,2,8)) #方法一 mydata$sumx<-mydata$x1+mydata$x ...

  10. java实验程序基础中的问题总结 java图形化界面

    一,课程中的问题 1,知道程序实现的大体框架,但是不能具体到每一个细节,这需要平时的积累. 2,在不同文件夹中定义的类之间有没有联系,类与类之间可以通过接口相互联系. 3,如何在一个对话框中显示文本, ...