HTML+CSS+JS模仿win10亮度调节效果

代码

<!doctype html>
<html><head><meta charset="utf-8"><title>模仿win10的亮度调节</title><style>.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;}</style></head><body><div class="mask"></div><div class="control_bar"></div><div class="control_bar" style="border-bottom:3px solid #505151;" id="control_bar_mask"></div><div class="control_bar_cursor"></div></body><script>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;};};};</script>
</html>

1.将各个元素的样子写出来

这里为了方便好观察给body添加了一个背景颜色

html

<div class="control_bar"></div>
<div class="control_bar" style="border-bottom:3px solid #505151;"  id="control_bar_mask></div>
<div class="control_bar_cursor"></div>

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

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用控制条来控制其透明度达到亮度调节效果

<div class="mask"></div>

.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模仿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中亮度怎么写,HTML+CSS+JS模仿win10亮度调节效果的示例代码
HTML+CSS+JS模仿win10亮度调节效果代码模仿win10的亮度调节 .control_bar{ height:200px; width:500px; border-bottom:3px ...
惠普战66键盘win10亮度调节快捷键失灵的解决办法
问题可能原因:在外部硬件没有损坏的情况下,最大的可能就是驱动程序出了问题. 解决办法:1.首先让我们看一下win10中有哪些常见的屏幕亮度调节的方法 <显示设置>/ 如果上述方法不可行可以 ...
win10亮度调节消失的解决方法
1.起因: 某一天起,win10系统的亮度调节的功能突然消失了,在网上试了很多办法,也去微软的反馈页面上寻找办法,最后找到的原因是黑屏驱动,teamview与向日葵都通过自己的黑屏驱动,提供远控时黑屏 ...
Win10亮度调节无效
Win10调节亮度无效前言曾经在Win7电脑上,我曾经误按调节亮度的F11按键,亮度直接变为最低,而F12亮度却增加不了,在重启看到Lenovo开机时狂按F12则会恢复正常.如今的Win10系统却 ...
win10亮度调节变为灰色无法调节
右键在显示适配器中卸载这两个东西,然后重启,发现好起来了可以正常调节了
OpenGL 亮度调节
目录一.OpenGL 亮度调节效果演示 1.IOS 演示效果 2.Windows OpenGL ES 演示效果 3.Windows OpenGL 演示效果二.OpenGL 亮度调节源码下载 1.I ...
win10计算机屏幕暗怎么办,Win10系统调节不了屏幕亮度怎么办
Win10系统调节不了屏幕亮度怎么办?有win10用户反馈在升级系统后,发现win10屏幕亮度调节不了,导致有些电脑屏幕太亮刺眼,有些电脑屏幕亮度太低,看屏幕都费劲,这是什么原因呢?下面先介绍几种出现 ...

HTML模仿win10亮度调节效果

HTML+CSS+JS模仿win10亮度调节效果

代码

1.将各个元素的样子写出来

2. 将各个元素叠到一起

3. 添加js

4. 添加一个mask用控制条来控制其透明度达到亮度调节效果

HTML模仿win10亮度调节效果相关推荐

最新文章

热门文章