HTML+CSS+JS 模仿 win10 亮度调节效果
代码
<! doctype html> <html> <head> <meta charset = utf-8> <title> 模仿 win10 的亮度调节 </title> <style>. #505151 ؛ الحدود الحدودية: 5px ؛ الهامش-توب: -12.5px ؛ الموضع: النسبية ؛ الأعلى: 0 ؛ اليسار: 0 ؛} sk {margin-top: -203px ؛ العرض: 0px ؛}. قناع {الموضع: ثابت ؛ أسفل: 0 ؛ أعلى: 0 ؛ اليسار: 0 ؛ اليمين: 0 ؛ الخلفية: أسود ؛ z-index: -1 ؛} </style> </head> <body> <viv class = mask> </viv> <div class = control_bar> </viv> <div class = control_bar style = border-bottom: 3px solid #505151 ؛ id = control_bar_mask> </viv> <div class = control_bar_cursor> </viv> </body> <script> window.onload = function () {var control_bar = document.getElementsByBar_MASK (control_bar) [0] document.getElementsByClassName (control_bar_cursor) [0] event.clienty ؛ if (cursor_x <def_left) {control_bar_cursor.style.left = 0 ؛ cursor_x - def_left + px ؛} // 亮度比 var stipers = parseint (control_bar_cursor.offsetleft - def_left)/parseint (control_bar.offsetwidth - 1) ؛ control_bar_mask.style.width = control_bar.bar.offsetwidth + px ؛ masksysty = نسبة ؛} ؛ window.onmouseup = function () {window.onmousemove = null ؛} ؛} ؛} ؛ </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 الجسم 添加了一个背景颜色
HTML
<div class = control_bar> </viv> <div class = control_bar style = border-bottom: 3px solid #505151 ؛ ID = CONTROL_BAR_MASK> </VIL> <DIV CLASS = CONTROL_BAR_CURSOR> </iv>
CSS
body {background: back ؛}. control_bar {height: 200px ؛ العرض: 500 بكسل ؛ Border-Bottom: 3px Solid #888888 ؛}. control_bar_cursor {height: 25px ؛ العرض: 8px ؛ الخلفية: #505151 ؛ الحدود الحدودية: 5px ؛}效果图
2. 将各个元素叠到一起
CSS
body {background: Black ؛}. control_bar {height: 200px ؛ العرض: 500 بكسل ؛ Border-Bottom: 3px Solid #888888 ؛}. control_bar_cursor {height: 25px ؛ العرض: 8px ؛ الخلفية: #505151 ؛ الحدود الحدودية: 5px ؛ الهامش: -12.5px ؛ الموقف: قريب أعلى: 0 ؛ اليسار: 0 ؛}. control_bar_cursor: hover {background: white ؛}#control_bar_mask {margin-top: -203px ؛ العرض: 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 ؛ } آخر إذا (cursor_x> control_bar.offsetwidth + def_left) {control_bar_cursor.style.left = control_bar.offsetwidth ؛ } آخر {control_bar_cursor.style.left = cursor_x - def_left + px ؛ } var stipenty = parseint (control_bar_cursor.offsetleft - def_left) / parseint (control_bar.offsetwidth - 1) ؛ control_bar_mask.style.width = نسبة * control_bar.offsetwidth + px ؛ } ؛ window.onmouseup = function () {window.onmousemove = null ؛ } ؛ } ؛} ؛4. 添加一个 قناع 用控制条来控制其透明度达到亮度调节效果
<div class = mask> </viv>
. ماسك {الموضع: ثابت ؛ أسفل: 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 (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 ؛ } آخر إذا (cursor_x> control_bar.offsetwidth + def_left) {control_bar_cursor.style.left = control_bar.offsetwidth ؛ } آخر {control_bar_cursor.style.left = cursor_x - def_left + px ؛ } // 亮度比 var stipenty = parseint (control_bar_cursor.offsetleft - def_left) /parseint (control_bar.offsetwidth - 1) ؛ control_bar_mask.style.width = نسبة * control_bar.offsetwidth + px ؛ Mask.Style.Opacity = 1 - النسبة ؛ } ؛ window.onmouseup = function () {window.onmousemove = null ؛ } ؛ } ؛} ؛总结到此这篇关于 HTML+CSS+JS 模仿 WIN10 亮度调节效果的示例代码的文章就介绍到这了 ، 更多相关 HTML CSS WIN10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！