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>

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

C# 调节图片亮度
原文地址:https://www.cnblogs.com/wjr408/p/6727118.html 昨天去客户那里测试,需求才开始,所以很简单,就是测一下能不能接受到视频或图片,然后保存下来,现场客 ...
前端设计——js实现图片切换的淡入淡出
1.网页结构如图所示 2.页面布局设计细节 ①分块:一个小方块是一个div. ②无序列表一般是竖直排放的,可以通过float让其水平排放.float:left; ③三个小方块是浮动上去的,所以要用到p ...
android开发之GestureDetector手势识别（调节音量、亮度、快进和后退）
写UI布局: <?xml version="1.0" encoding="utf-8"?> <LinearLayout xmlns:andro ...
Android 调节图片工具类
package com.base.changeimage; import android.graphics.Bitmap; import android.graphics.Canvas; import ...
js简单图片版时钟，带翻转效果
js简单图片版时钟,带翻转效果 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"& ...
JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
js压缩图片base64长度
var myCanvas=$('.img-container > img').cropper('getCroppedCanvas'); (function (base64){ var image ...
unity, 调节图片导入尺寸
unity中直接导入高清图,通过max size来调节图片尺寸. 打包的时候通过看editor log或通过插件来监视是否有过大尺寸的图片.
ASP.NET MVC中使用Dropzone.js实现图片的批量拖拽上传
说在前面最近在做一个MVC相册的网站(这里),需要批量上传照片功能,所以就在网上搜相关的插件,偶然机会发现Dropzone.js,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

随机推荐

4.QList
#include "mainwindow.h" #include <QApplication> #include <QLabel> #include < ...
Servlet基础（二）
1.什么是Servlet java类,提供web形式的访问 servlet就是按照javaee中servlet规范所编写的java类能够被浏览器通过URL形式访问到 2.怎么在javae ...
Function 和 eval 知识点总结
1 Function 1.1 函数的创建方式 1 函数声明 2 函数表达式 3 new Function // 1 function foo() {} // 2 var foo = function( ...
JS面向对像编程四—— prototype 对象
http://blog.csdn.net/fanwenjieok/article/details/54575560 大部分面向对象的编程语言,都是以“类”(class)作为对象体系的语法基础.Java ...
Spring Boot 20170913
SpringBoot 是做微服务的,比如只用来发邮件,只用来上载文件等等.优点是开发极其简单,约定大于俗成,缺点是不适合小型项目.通常用来分解大型项目,做成多个微服务. 参考: http://www. ...
NYOJ 737 石子合并(一)
题意排成一排的石子,每次合并相邻两堆并由一定的代价,求合并成一堆的最小代价解法区间dp 枚举长度 dp[i,j]表示合并石子堆编号从i到j为一堆所需的最小代价(这个题目的代价是sum(i..j) ...
10、Latent Relational Metric Learning via Memory-based Attention for Collaborative Ranking-----基于记忆注意的潜在关系度量协同排序
一.摘要: 本文模型 LRML(潜在相关度量学习)是一种新的度量学习方法的推荐.[旨在学习用户和项目之间的相关关系,而不是简单的用户和项目之间的push和pull关系,push和pull主要针对LMN ...
NOI 2011 阿狸的打字机 (AC自动机+dfs序+树状数组)
题目大意:略(太长了不好描述) 良心LOJ传送门先对所有被打印的字符串建一颗Trie树观察数据范围,并不能每次打印都从头到尾暴力建树,而是每遍历到一个字符就在Trie上插入这个字符,然后记录每次打 ...
Hive学习：Hive连接JOIN用例详解
1 准备数据: 1.1 t_1 01 张三 02 李四 03 王五 04 马六 05 小七 06 二狗 1.2 t_2 01 11 03 33 04 44 06 66 07 77 08 88 1.3 ...
ThinkPHP 跨模块调用操作方法（A方法与R方法）
ThinkPHP 跨模块调用操作方法(A方法与R方法) 跨模块调用操作方法前面说了可以使用 $this 来调用当前模块内的方法,但实际情况中还经常会在当前模块调用其他模块的方法.ThinkPHP 内 ...

js调节图片的亮度

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

随机推荐

热门专题