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,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
随机推荐
- ubuntu下无法将iNode绑定到侧边栏的解决办法
title: ubuntu下无法将iNode绑定到侧边栏的解决办法 toc: false date: 2018-09-01 17:43:52 categories: methods tags: ubu ...
- jetty服务器数据源配置JNDI-Oracle,MySQL,SQLServer,DB2等 (转)
下载jetty 下载jetty服务器(8.1.0.RC2),解压到任意目录下 http://dist.codehaus.org/jetty/jetty-hightide-8.1.0/jetty-hig ...
- IIS之虚拟目录学习
从刚实习开始就了解到虚拟目录这个词,但是一直没去研究过什么意思,而且也没实际用过.一晃两年过去了,今天正好趁休息,补补脑学习下. 通过百度了解到,虚拟目录创建的目的是为了应对磁盘容量爆满,部署的网站不 ...
- [转]SQL Server 批量完整备份
最近我们的服务器需要迁移,服务器上有很多数据库,有很多都不知道干什么的了,但是为了保险起见,我决定都备份下,起初我是右键一个一个备份的,备份三四个还好,可是数据库太多了,而且手动一步一步操作,还得修改 ...
- Chosen：Select 选择框的华丽变身
HTML Form 表单里的各种组件,例如文本输入框,textarea,按钮等,都可以通过CSS或其它技术进行美化,让它们看起来很漂亮了,唯独下拉列表选项框(select box),不管你怎么做,它摆 ...
- 取消overflow-scroll的滚动条
通常情况下设置完overflow:scroll之后,就会在页面中出现滚动条,下边的方法可以取消掉此滚动条: container为当前设置overflow:scroll的元素 1.使用以下CSS可以隐藏 ...
- JPush设置别名不走成功回调的解决办法
在参考了极光推送的文档之后,对个推(单个推送)有设置别名的方法,方法如下 [JPUSHService setTags:tags alias:alias fetchCompletionHandle:^( ...
- innobackupex: Error: --decompress requires qpress
数据库版本:5.6.16系统版本:cenos 6.5通过percona-xtranbackup恢复数据库报错(软件版本:percona-xtrabackup-2.1.9-744.rhel6.x8 ...
- jquery根据滚动条动态加载数据
PHP Code <div id="container"> <?php $query=mysql_query("select * from conten ...
- 页面定制CSS代码初探（六）：h2、h3 标题自动生成序号 详细探索过程
前言 最近在整理博客写作格式的规范,碰到一个问题:标题要不要加序号? 直到我碰到一个人这么说 手动维护编号实在是一件很闹心的事情, 如果位置靠前的某个段落被删除了, 那么几乎每个段落的编号都要手动修改 ...