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,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
随机推荐
- UINavi中push控制器的时候隐藏TabBar
当一个UITabbarController管理多个UINavigationController的时候,我们又从这每一个UINavigationController中push一个ViewControll ...
- 如何安装windows系统
前言:装系统有两种方式,一种是下载系统镜像文件后解压ios文件到除c盘以外其他盘都可(如原系统是win10系统,则可以直接右键加载,而不必解压),然后运行.exe文件就可以自动安装了.这种方法在新款电 ...
- ubuntu软件卸载方法
一.查看软件包 1.查看已安装的软件包 dpkg --list 2.查看不知道要删除软件的具体名称 dpkg --get-selections | grep <软件相关名称> 二.卸载 1 ...
- BZOJ 2821 分块+二分
题意: N个数,M组询问,每次问[l,r]中有多少个数出现正偶数次. 思路: 把N个数分成sqrt(n)块,预处理d[i][j]表示第i块起点到第j块末尾的答案 枚举起点i,并维护一个数组记录每个数到 ...
- 日志记录~log4.net
1. 添加Log4net引用 2. 添加配置文件 Log.config <?xml version="1.0" encoding="utf-8"?> ...
- ES6常用特性
以下是ES6排名前十的最佳特性列表(排名不分先后): Default Parameters(默认参数) in ES6 Template Literals (模板文本)in ES6 Multi-line ...
- Django开发之路 一（django安装并测试运行）
安装Django与测试 1.虚拟环境的安装 一般来说Django的开发最好是在虚拟环境上进行,这样的好处是可以将不同的Django的项目的环境分割开来,相互不影响.比如说项目一用到Python2.x和 ...
- 页面加载通过javascript来修改控件属性
function changeFormElementStatus(tagNames) { var tagNameArr = tagNames.split("," ...
- 从DataTable高效率导出数据到Excel
首先从数据库读取数据到DataTable,这我就不提了,大家都明白.下面直接介绍如何从DataTable高效率导出数据到Excel中的方法,代码如下: using Microsoft.Office.I ...
- UNP学习笔记4——I/O复用：select和poll函数
1 概述 之间的学习中发现,传统的阻塞式系统调用不仅浪费进程运行时间,而且会带来狠毒问题.因此进程需要有一种预先告知内核的能力,使得内核一旦发现进程指定的一个或者多个I/O条件就绪,它就通知进程.这个 ...