代码
模仿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 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添加了一个背景颜色
立即学习“前端免费学习笔记（深入）”；
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
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 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 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教程》
以上就是HTML+CSS+JS 模仿 Win10 亮度调节效果的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1548485.html
微信扫一扫 
支付宝扫一扫 
