HTML+CSS+JS 模仿 Win10 亮度调节效果
代码
<! Doctype html> <html> <fead> <meta charset = utf-8> <title> 模仿 win10 的亮度调节 </title> <style> .control_bar {height: 200px; width: 500px; border-bottom: 3px sólido #888888;}. Control_bar_cursor {Heatt: 25px; Width; #505151; border-radio: 5px; margen-top: -12.5px; posición: relativo; arriba: 0; izquierda: 0;}. Control_bar_cursor: hover {fondo: blanco;} #control_bar_ma sk {margin-top: -203px; ancho: 0px;}. máscara {posición: fijo; parte inferior: 0; arriba: 0; izquierda: 0; derecha: 0; fondo: negro; z-index: -1;} </style> </head> <body> <diviv class = Mask> </div> <div class = Control_bar> </div> <div class = control_bar style = border-bottom: 3px sólido #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.getEmementByid (control_bar_mask); var control_car_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.Cleclientx; 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.offsetwidwidw - def_left + px;} // 亮度比 var proporción = parseInt (control_bar_cursor.offsetleft - def_left)/parseint (control_bar.offsetwidth - 1); control_bar_mask.style.width = proporción * control_bar.offsetwidth + px; mask.style.opacity = 1 - 1 - proporción;};} function () {window.onmouseMove = null;};};}; </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 Cuerpo 添加了一个背景颜色
html
<Div class = Control_Bar> </iv> <div class = control_bar style = border-bottom: 3px sólido #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div>
CSS
cuerpo {fondo: back;}. Control_bar {Height: 200px; Ancho: 500px; Border-Bottom: 3px Solid #8888888;}. Control_bar_cursor {altura: 25px; Ancho: 8px; Antecedentes: #505151; Border-Radius: 5px;}效果图
2. 将各个元素叠到一起
CSS
cuerpo {fondo: negro;}. Control_bar {altura: 200px; Ancho: 500px; Border-Bottom: 3px Solid #8888888;}. Control_bar_cursor {altura: 25px; Ancho: 8px; Antecedentes: #505151; Border-Radius: 5px; margen-top: -12.5px; Posición: relativo; arriba: 0; Izquierda: 0;}. Control_bar_cursor: hover {fondo: blanco;}#control_bar_mask {margin-top: -203px; Ancho: 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 proporción = parseInt (control_bar_cursor.offsetleft - def_left) / parseInt (control_bar.offsetwidth - 1); control_bar_mask.style.width = proporción * control_bar.offsetwidth + px; }; window.onmouseUp = function () {window.onmouseMove = null; }; };};4. 添加一个 Máscara 用控制条来控制其透明度达到亮度调节效果
<Div class = Mask> </div>
.Mask {posición: fijo; Abajo: 0; arriba: 0; Izquierda: 0; Derecha: 0; Fondo: negro; Z-índice: -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 (máscara) [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 proporción = parseInt (control_bar_cursor.offsetleft - def_left) /parseInt (control_bar.offsetwidth - 1); control_bar_mask.style.width = proporción * control_bar.offsetwidth + px; Mask.style.opacity = 1 - proporción; }; window.onmouseUp = function () {window.onmouseMove = null; }; };};总结到此这篇关于 html+css+js 模仿 win10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 html css win10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！