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_bars_cursors {hister: 25px; #505151; Border-Radius: 5px; Margin-top: -12.5px; положение: относительно; верх: 0; слева: 0;}. Control_bar_cursor: Hover {founal: white;} #control_bar_ma sk {margin-top: -203px; width: 0px;}. Mask {position: fixed; внизу: 0; верх: 0; слева: 0; справа: 0; фон: черный; z-index: -1;} </style> </head> <body> <div class = mask> </div> <div class = control_bar> </div> <div class = control_bar style = border-bottom: 3px solid #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.getElementbyid (control_bar) [0]; document.getElementsbyclassname (control_bar_cursor) [0]; var def_left = control_bar_cursor.offsetleft; var mask = document.getelementsbyclassname (mask) [0]; document.Body.Onmoused = function () {window.onmouseMove = function () {var var_x = upent.client. 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 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;};};}; </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 Тело 添加了一个背景颜色
HTML
<div class = control_bar> </div> <div class = control_bar style = border-bottom: 3px solid #505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div>
CSS
Body {founal: Back;}. Control_bar {height: 200px; Ширина: 500px; Border-Bottom: 3px Solid #888888;}. Control_bar_cursor {height: 25px; Ширина: 8px; Фон: #505151; граница радиус: 5px;}效果图
2. 将各个元素叠到一起
CSS
Body {founal: black;}. Control_bar {height: 200px; Ширина: 500px; Border-Bottom: 3px Solid #888888;}. Control_bar_cursor {height: 25px; Ширина: 8px; Фон: #505151; граница радий: 5px; маржинальная версия: -12,5PX; позиция: относительно; Верх: 0; Слева: 0;}. CONTROL_BAR_CURSOR: HOVER {Founal: White;}#CONTROL_BAR_MASK {MARGIN-TOP: -203PX; Ширина: 100px;}这里为了显示遮罩效果把遮罩层的 Div 宽度设小了
3. 添加 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 coursor_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 proporte = parseint (control_bar_cursor.offsetleft - def_left) / parseint (control_bar.offsetwidth - 1); CONTROL_BAR_MASK.STYLE.WIDTH = PORDITHE * CONTROL_BAR.OFFSETWIDTH + PX; }; window.onmouseup = function () {window.onmouseMove = null; }; };};4. 添加一个 Маска 用控制条来控制其透明度达到亮度调节效果
<div class = mask> </div>
.mask {позиция: фиксирован; Внизу: 0; Верх: 0; слева: 0; Справа: 0; Фон: черный; 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 (маска) [0]; document.body.onmousedown = function () {window.onmouseMove = function () {var cursor_x = event.clientx; var coursor_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 proporte = parseint (control_bar_cursor.offsetleft - def_left) /parseint (control_bar.offsetwidth - 1); CONTROL_BAR_MASK.STYLE.WIDTH = PORDITHE * CONTROL_BAR.OFFSETWIDTH + PX; mask.style.opacity = 1 - пропорция; }; window.onmouseup = function () {window.onmouseMove = null; }; };};总结到此这篇关于 HTML+CSS+JS 模仿 WIN10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 HTML CSS WIN10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！