如何使用HTML+CSS+JS 模仿 Win10 亮度调节效果

2024-12-16 技术教程

这篇文章将为大家详细讲解有关如何使用HTML+CSS+JS 模仿 Win10 亮度调节效果，文章内容质量较高，因此小编分享给大家做个参考，希望大家阅读完这篇文章后对相关知识有一定的了解。

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><p class="mask"></p><p class="control_bar"></p><p class="control_bar" style="border-bottom:3px solid #505151;" id="control_bar_mask"></p><p class="control_bar_cursor"></p></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

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;}

这里为了显示遮罩效果把遮罩层的p宽度设小了

3. 添加js

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

.mask{ position:fixed; bottom:0; top:0; left:0; right:0; background:black; z-index:-1;}

关于如何使用HTML+CSS+JS 模仿 Win10 亮度调节效果就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。