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,试用了一下完全符合我的要求,而且样式挺满意的,于是就在我的项目中使用 ...
随机推荐
- iOS8新特性之交互式通知
目前分为四个推送:用户推送,本地推送,远程推送,地理位置推送. if (IS_IOS8) { //1.创建消息上面要添加的动作(按钮的形式显示出来) UIMutableUserNotification ...
- Python学习网络爬虫--转
原文地址:https://github.com/lining0806/PythonSpiderNotes Python学习网络爬虫主要分3个大的版块:抓取,分析,存储 另外,比较常用的爬虫框架Scra ...
- 弹出ifame页面(jquery.reveal.js)
<body> <a data-reveal-id="myModalDailyModify" data-animation="fade" tit ...
- 浅谈SpringCloud (一) 什么是微服务和不使用SpringCloud怎么访问服务提供者
微服务和SpringCloud介绍 1.什么是微服务? 看过一遍介绍的很清楚的博客:https://blog.csdn.net/wuxiaobingandbob/article/details/786 ...
- 微信小程序实现图片双滑缩放大小
在做小程序开发的过程中,后端传来一张图片地图,需要实现双手指滑动,使图片缩放,最终得出了一下代码: js : Page({ data: { touch: { distance: , scale: , ...
- 【AnjularJS系列6 】 过滤器
第六篇,过滤器 AngularJS 过滤器可用于转换数据: 过滤器 描述 currency 格式化数字为货币格式. filter 从数组项中选择一个子集. lowercase 格式化字符串为小写. o ...
- day05-3 初步了解数据类型
目录 数据类型介绍 数字类型 整形(int) 浮点型(float) 字符串 列表 字典 布尔值 数据类型介绍 不同的数据会有不同的数据类型 为了定义不同的数据,我们Python中提供了下述几个数据类型 ...
- Bzoj 2502: 清理雪道 有上下界网络流_最小流
好长时间没有写网络流了,感觉好手生.对于本题,设一个源点 $s$ 和 $t$.1.由 $s$ 向每个点连一条没有下界,容量为无限大的边,表示以该点为起点.2.由每个点向 $t$ 连一条没有下界,容量为 ...
- Python笔记25-----------创建二维列表【浅copy】和转置
一.创建二维列表 1.二维列表创建第二维的时候,如果采用*2这种方式,这是一种浅复制的方式,同时引用到同一个list,如上图的C. 这种形式,不方便修改C[ i ][ j ]的数据,如果改C[ 0 ] ...
- input输入框获取焦点是背景黄色去除
input:-webkit-autofill { -webkit-box-shadow: 0 0 0px 1000px white inset !important;}