Html+css+js 模仿 win10 亮度调节效果
代码
<! doctype html> <html> <head> <meta charset = utf-8> <title> 模仿 win10 的亮度调节 </ititle> <yoy> .control_bar {altura: 200px; width: 500px; borda-bottom: 3px Solid #88888;}. #505151; Radio de fronteira: 5px; margem-top: -12.5px; posição: relativa; topo: 0; esquerda: 0;}. Control_bar_cursor: hover {background: white;} #control_bar_ma sk {margin-top: -203px; largura: 0px;}. máscara {posição: corrigida; inferior: 0; topo: 0; esquerda: 0; direita: 0; fundo: preto; z-index: -1;} </style> </adhead> <body> <div class = máscara> </div> <div class = control_bar> </div> <div class = control_bar estilo = borda-bottom: 3px Solid #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div> </body> <cript> window.onload = function () {var control_bar = document.getElementsByclassName (control_bar) [0]; var control_bar_Mask = document.EmementById (control_bar) [0]; Document.getElementsByClassName (Control_Bar_Cursor) [0]; var def_left = control_bar_cursor.offsetleft; var Mask = document.getElementsByClassName (Mask) [0]; document.body.onMouseDown = function) { 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 proporção = parseint (control_bar_cursor.offsetleft - def_left)/parseint (control_bar.offsetwidth - 1); control_bar_mask.style.width = suportes * control_bar.oftwidthththththththththththle.style.width = suportes * control_bar.flectwidththththththththththth) proporção;}; window.onMouseUp = function () {window.onMousEMove = null;};};}; </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 Corpo 添加了一个背景颜色
html
<div class = control_bar> </div> <div class = control_bar estilo = borda-bottom: 3px Solid #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div>
CSS
corpo {background: back;}. Control_bar {altura: 200px; Largura: 500px; Bottom de borda: 3px Solid #888888;}. Control_bar_cursor {altura: 25px; Largura: 8px; Antecedentes: #505151; Radio de fronteira: 5px;}效果图
2. 将各个元素叠到一起
CSS
corpo {background: preto;}. Control_bar {altura: 200px; Largura: 500px; Bottom de borda: 3px Solid #888888;}. Control_bar_cursor {altura: 25px; Largura: 8px; Antecedentes: #505151; Radio de fronteira: 5px; Margin-top: -12,5px; Posição: relativa; topo: 0; Esquerda: 0;}. Control_bar_cursor: hover {background: white;}#control_bar_mask {margin-top: -203px; Largura: 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 proporciona = parseint (control_bar_cursor.offsetleft - def_left) / parseint (control_bar.offsetWidth - 1); control_bar_mask.style.width = proporção * control_bar.offsetWidth + px; }; window.onMouseUp = function () {window.onMouseMove = null; }; };};4. 添加一个 Máscara 用控制条来控制其透明度达到亮度调节效果
<div class = máscara> </div>
.Mask {Posição: fixado; Inferior: 0; topo: 0; Esquerda: 0; Direita: 0; Antecedentes: preto; 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 máscara = 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 proporção = parseint (control_bar_cursor.offsetleft - def_left) /parseint (control_bar.offsetWidth - 1); control_bar_mask.style.width = proporção * control_bar.offsetWidth + px; Mask.style.Opacity = 1 - Proporção; }; window.onMouseUp = function () {window.onMouseMove = null; }; };};总结到此这篇关于 html+css+js 模仿 win10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 html css win10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！