HTML+CSS+JS 模仿 Win10 亮度调节效果
代码
<! docType html> <html> <head> <meta charset = utf-8> <title> 模仿 Win10 的亮度调节 </title> <style> .control_bar {Höhe: 200px; Breite: 500px; Border-Bottom: 3px Solid #8888; #505151; Border-Radius: 5px; Margin-Top: -12.5px; Position: Relativ; oben: 0; links: 0;}. Control_bar_cursor: hover {Hintergrund: White;} #control_bar_ma sk {margin-top: -203px; width: 0px;}. mask {Position: behoben; unten: 0; ober: 0; class = mask> </div> <div class = control_bar> </div> <div class = control_bar style = border-bottom: 3px fest #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div> </body> <script> Fenster. 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 = Ereignis.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.lleft = Cursor_x - Def_Left + px;} // 亮度比 var proportional = parseInt (control_bar_cursor.offsetleft - def_left)/parseInt (control_bar.offsetwidth - 1); control_bar_mask.style.width = proportion * controll_bar.offsetwidth + px; px; px; px; px; mask.stylyle proportional;}; window.onmouseUp = function () {window.onmousemove = null;};};}; </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 Körper 添加了一个背景颜色
html
<div class = control_bar> </div> <div class = control_bar style = border-bottom: 3px fest #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div>
CSS
Body {Hintergrund: zurück;}. control_bar {Höhe: 200px; Breite: 500px; Border-Bottom: 3px Solid #888888;}. Control_Bar_Cursor {Höhe: 25px; Breite: 8px; Hintergrund: #505151; Border-Radius: 5px;}效果图
2. 将各个元素叠到一起
CSS
Body {Hintergrund: schwarz;}. control_bar {Höhe: 200px; Breite: 500px; Border-Bottom: 3px Solid #888888;}. Control_Bar_Cursor {Höhe: 25px; Breite: 8px; Hintergrund: #505151; Border-Radius: 5px; Rand: -12,5px; Position: Relativ; Top: 0; Links: 0;}. Control_bar_cursor: Hover {Hintergrund: White;}#control_bar_mask {margin-top: -203px; Breite: 100px;}这里为了显示遮罩效果把遮罩层的 div 宽度设小了
3. 添加 js
JS
window.onload = function () {var control_bar = document.getElementsByClassName (control_bar) [0]; var kontroll_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 proportional = 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. 添加一个 Maske 用控制条来控制其透明度达到亮度调节效果
<div class = mask> </div>
.Mask {Position: behoben; unten: 0; Top: 0; links: 0; Rechts: 0; Hintergrund: Schwarz; Z-Index: -1;} window.onload = function () {var control_bar = document.getElementsByClassName (control_bar) [0]; var kontroll_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 (Maske) [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 proportional = parseInt (control_bar_cursor.offsetleft - def_left) /parseInt (control_bar.offsetwidth - 1); control_bar_mask.style.width = proportion * control_bar.offsetwidth + px; Maske.Style.Opacity = 1 - Proportion; }; window.onmouseUp = function () {window.onmousemove = null; }; };};总结到此这篇关于 HTML+CSS+JS 模仿 Win10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 HTML CSS Win10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！