html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果
代码
模仿win10的亮度调节
.control_bar{
height:200px;
width:500px;
border-bottom:3px solid #888888;
}
.control_bar_cursor{
height:25px;
width:8px;
background: #505151;
border-radius:5px;
margin-top:-12.5px;
position:relative;
top:0;
left:0;
}
.control_bar_cursor:hover{
background:white;
}
#control_bar_mask{
margin-top:-203px;
width:0px;
}
.mask{
position:fixed;
bottom:0;
top:0;
left:0;
right:0;
background:black;
z-index:-1;
}
window.onload = function(){
var control_bar = document.getElementsByClassName("control_bar")[0];
var control_bar_mask = document.getElementById("control_bar_mask");
var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
var def_left = control_bar_cursor.offsetLeft;
var mask = document.getElementsByClassName("mask")[0];
document.body.onmousedown = function(){
window.onmousemove = function(){
var cursor_X = event.clientX;
var cursor_Y = event.clientY;
if(cursor_X < def_left){
control_bar_cursor.style.left = 0;
}else if(cursor_X > control_bar.offsetWidth + def_left){
control_bar_cursor.style.left = control_bar.offsetWidth;
}else{
control_bar_cursor.style.left = cursor_X - def_left + "px";
}
//亮度比
var proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
control_bar_mask.style.width = proportion * control_bar.offsetWidth + "px";
mask.style.opacity = 1 - proportion;
};
window.onmouseup = function(){
window.onmousemove = null;
};
};
};
1.将各个元素的样子写出来
这里为了方便好观察给body添加了一个背景颜色
html
id="control_bar_mask>
css
body{
background:back;
}
.control_bar{
height:200px;
width:500px;
border-bottom:3px solid #888888;
}
.control_bar_cursor{
height:25px;
width:8px;
background: #505151;
border-radius:5px;
}
效果图
2. 将各个元素叠到一起
css
body{
background:black;
}
.control_bar{
height:200px;
width:500px;
border-bottom:3px solid #888888;
}
.control_bar_cursor{
height:25px;
width:8px;
background: #505151;
border-radius:5px;
margin-top:-12.5px;
position:relative;
top:0;
left:0;
}
.control_bar_cursor:hover{
background:white;
}
#control_bar_mask{
margin-top:-203px;
width:100px;
}
这里为了显示遮罩效果把遮罩层的div宽度设小了
3. 添加js
js
window.onload = function(){
var control_bar = document.getElementsByClassName("control_bar")[0];
var control_bar_mask = document.getElementById("control_bar_mask");
var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
var def_left = control_bar_cursor.offsetLeft;
document.body.onmousedown = function(){
window.onmousemove = function(){
var cursor_X = event.clientX;
var cursor_Y = event.clientY;
if(cursor_X < def_left){
control_bar_cursor.style.left = 0;
}else if(cursor_X > control_bar.offsetWidth + def_left){
control_bar_cursor.style.left = control_bar.offsetWidth;
}else{
control_bar_cursor.style.left = cursor_X - def_left + "px";
}
var proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
control_bar_mask.style.width = proportion * control_bar.offsetWidth + "px";
};
window.onmouseup = function(){
window.onmousemove = null;
};
};
};
4. 添加一个mask用控制条来控制其透明度达到亮度调节效果
.mask{
position:fixed;
bottom:0;
top:0;
left:0;
right:0;
background:black;
z-index:-1;
}
window.onload = function(){
var control_bar = document.getElementsByClassName("control_bar")[0];
var control_bar_mask = document.getElementById("control_bar_mask");
var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
var def_left = control_bar_cursor.offsetLeft;
var mask = document.getElementsByClassName("mask")[0];
document.body.onmousedown = function(){
window.onmousemove = function(){
var cursor_X = event.clientX;
var cursor_Y = event.clientY;
if(cursor_X < def_left){
control_bar_cursor.style.left = 0;
}else if(cursor_X > control_bar.offsetWidth + def_left){
control_bar_cursor.style.left = control_bar.offsetWidth;
}else{
control_bar_cursor.style.left = cursor_X - def_left + "px";
}
//亮度比
var proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
control_bar_mask.style.width = proportion * control_bar.offsetWidth + "px";
mask.style.opacity = 1 - proportion;
};
window.onmouseup = function(){
window.onmousemove = null;
};
};
};
总结
到此这篇关于HTML+CSS+JS模仿win10亮度调节效果的示例代码的文章就介绍到这了,更多相关html css win10 亮度调节内容请搜索脚本之家以前的文章或继续浏览下面的相关文章,希望大家以后多多支持脚本之家!
html中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码相关推荐
- html中图片亮度调节,HTML+CSS+JS 模仿 Win10 亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- html的window效果,HTML+CSS+JS模仿win10亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
- html制作翻页效果代码,使用原生JS实现滚轮翻页效果的示例代码
一.滚轮事件 当用户通过鼠标滚轮与页面交互.在垂直方向上滚动页面时,就会触发mousewheel事件,这个事件就是实现全屏切换效果需要用到的.在IE6, IE7, IE8, Opera 10+, Sa ...
- css实现文字中间横线,css实现文字居中两边横线效果的示例代码
本文介绍了css实现文字居中两边横线效果的示例代码,分享给大家,具体笔记如下: 效果: content="width=device-width, user-scalable=no, init ...
- HTML模仿win10亮度调节效果
HTML+CSS+JS模仿win10亮度调节效果 代码 <!doctype html> <html><head><meta charset="utf ...
- JAVA中解决Filter过滤掉css,js,图片文件等问题
JAVA中解决Filter过滤掉css,js,图片文件等问题 参考文章: (1)JAVA中解决Filter过滤掉css,js,图片文件等问题 (2)https://www.cnblogs.com/er ...
- html+css+js 实现图片轮播效果
html+css+js 实现图片轮播效果 图片轮播效果: 会自动 向左 || 向右 切换图片 能手动点击按钮切换图片 多用于商品展览等等 --首先我们创建一个盒子进行展览,然后一个< ul> ...
- html+css+js实现自动敲文字效果
html+css+js实现自动敲文字效果 简介:本文是一个前端案例的讲解,关于如何用html+css+js制作出逐渐显示出文字的效果,这个效果可以帮助大家在新人面前装一波. 效果展示 效果就是这个样子 ...
- html涟漪动画效果,CSS+JS实现水滴涟漪动画按钮效果的示例代码
代码如下所示: Document .btn{ display: block; width: 300px; height: 100px; margin: 50px; outline: 0; overfl ...
最新文章
- 怎么访问和java包同级的文件_JAVA程序员谈几种访问文件的方式
- Java学习之if语句
- Database之SQLSever:SQLSever数据库管理(GUI法/SQL语句命令法两种方法实现备份(完整备份、差异备份、日志备份)、还原、删除、修改数据库等案例)之详细攻略
- Retrofit+RxJava+OkHttp项目中的使用
- Day13-日历模块
- Python稳基修炼的经典案例12(计算机二级、初学者必会的字符文件处理)
- [论文阅读] Automatic Polyp Segmentation via Multi-scale Subtraction Network
- BG2EE 术士solo
- Java集合系列总结
- pcb文件转成原理图_电子设计基础教学-PCB板制作之 AD(Altium Designer)的工程建立过程...
- 手机的移动网络怎么开_都连接WiFi了,还要开移动网络吗?
- JAVA程序设计基础(第六版)第六章习题 6.13
- IntelliJ IDEA使用教程 (总目录篇)
- 星域cdn概念股票_星域CDN获市场认可 获得牌照并扩大经营
- .NET生成ICO图标
- 李宏毅2022机器学习hw5
- 高小英和张东健1998年合作出演过爱情片《恋风恋歌
- Java:计算代码耗时的5种方法
- 刺客信条奥德赛ce修改技能点_刺客信条奥德赛特长加点
- ERP系统对接淘宝电商和线下工作人员的问题与解决方案