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. MySQL8.0修改临时密码

    解决MySQL8.0报错:Unknown system variable 'validate_password_policy' 一.问题描述 1.在安装MySQL8.0时,修改临时密码,因密码过于简单 ...

  2. Java基础——选择排序、冒泡排序

    1.选择排序 原理是直接从待排序数组里选择一个最小(或最大)的数字,每次都拿一个最小数字出来, 顺序放入新数组,直到全部拿完 代码演示: public class Test3 { public sta ...

  3. VSCode新建vue文件自定义模板

    在一个Vue的项目中,反复的新建.vue文件是一个必不可少的工序.本着科技让人偷懒的原则,我们可以利用VSCode的snippet在.vue文件创建后能轻松地生成一套模板. 整个过程是轻松加愉快的,只 ...

  4. 杭电 2639 Bone Collector II【01背包第k优解】

    解题思路:对于01背包的状态转移方程式f[v]=max(f[v],f[v-c[i]+w[i]]);其实01背包记录了每一个装法的背包值,但是在01背包中我们通常求的是最优解, 即为取的是f[v],f[ ...

  5. JAVA 静态内部类--转自http://bbs.csdn.net/topics/350021609

    内部类其实并不是非要声明成static的..主要还是要看实际情况决定..静态和非静态有不同的作用.. 引用一篇文章给楼主参考下吧. 在一个类中创建另外一个类,叫做成员内部类.这个成员内部类可以静态的( ...

  6. Python2以及Python3中的除法

    前言 在讨论话题之前,我们先说下程序中除法的三种情况: 1. 传统的除法,我称之为整型地板除.在C.C++.Java中常见,特点是整数相除舍弃小数取整,浮点数相除则保留小数(如果有). >> ...

  7. table标签 在谷歌和ie浏览器下不同的表现效果

    在项目中有了一个这样的需求: 我需要利用vue的模板语法v-for循环生成tr,这个tr是需要双重循环来确定其个数的, 我的实现: 我在tr外面包了一个template标签, 效果: 谷歌浏览器下实现 ...

  8. Eclipse安装不了AXIS2 Tool插件,总是找不到axis2 wizards的问题找到解决答案（转载）

    http://blog.csdn.net/downmoon/article/details/7309485 最近在学习axis2工作需要,google一搜,网上到处都是装axis2插件的.根据网上的直 ...

  9. js在当前日期基础上，加1天 3天 7天 15天

    需求 点击保障期的天数 根据起始时间算出结束时间 代码 //点击保障期触发的方法 periodChange(val,id){ this.activeNumperiod=val this.submitD ...

  10. Python 爬歌曲

    Python 爬歌曲 小练习 import re import time import requests # http://www.htqyy,com/top/hot # http://f2.htqy ...