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,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...

随机推荐

Jmeter执行多条Mysql语句报错
花了很长时间找原因,Jmeter一直返回的是MySql语法错误,就写了两条很简单的删除语句,并且在MySql里可以正常执行包括换了jdbc驱动包,更改不同的Query Type等后来发现两条语句拆 ...
javascript在html直接传值
function getUrlParam(url, name) { var pattern = new RegExp("[?&]" + name + "\=([^ ...
MEF example code
public interface IObjectResolver { } public class ObjectResolver:IObjectResolver { private Compositi ...
Web前端必须规避的8个误区
现在,有越来越多所谓的“教程”来帮助我们提高网站的易用性.下面收集了一些在Web开发中容易出错和被忽略的小问题,并且提供了参考的解决方案,以便于帮助Web开发者更好的完善网站. 通过避免下面这些小错误 ...
here.less
<html><head><title>Test Less</title><link rel="stylesheet/less" ...
Could not Open Install.Log File解决方法
很多时候我们使用控制面板卸载软件会遇到could not open install.log file的报错,最近我也遇到了一次.之前遇到这样的问题,很多人都会选择直接删除软件安装目录和快捷方式等等.这 ...
Visual Studio icon 含义
图片摘自:https://msdn.microsoft.com/en-us/library/y47ychfe.aspx
POJ 3517 And Then There Was One（约瑟夫环模板）
链接:传送门题意:典型约瑟夫环问题约瑟夫环模板题:n个人( 编号 1-n )在一个圆上,先去掉第m个人,然后从m+1开始报1,报到k的人退出,剩下的人继续从1开始报数,求最后剩的人编号 /**** ...
HDU 1575 Tr A（简单矩阵快速幂）
链接:传送门思路:简单矩阵快速幂,算完 A^k 后再求一遍主对角线上的和取个模 /********************************************************** ...
W10如何开启LinuxBash及安装Ubuntu
W10如何开启LinuxBash的功能 1)开启开发人员模式 2)启动部分windows功能完成后重启系统然后在cmd中输入bash按命令操作即可使用bash命令 3)下载安装ubuntu lxr ...

js调节图片的亮度

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

随机推荐

热门专题