HTML + CSS + JS 模仿 Win10 亮度调节效果
代码
<! doctype html> <html> <éadf> <meta charset = utf-8> <tight> 模仿 win10 的亮度调节 </title> <style> .Control_bar {height: 200px; width: 500px; border-bottom: 3px solide # 888888;}. Control_Bar_Cursor {height: 25px; width: 8px: Bandle # 505151; Border-Radius: 5px; margin-top: -12.5px; position: relatif; en haut: 0; gauche: 0;}. Control_Bar_Cursor: Hover {Background: White;} # Control_Bar_ma sk {margin-top: -203px; largeur: 0px;}. masque {position: fixe; en bas: 0; top: 0; gauche: 0; droit: 0; fond: noir; z-index: -1;} </ style> </ head> <body> <div. class = mask> </ div> <div class = Control_bar> </div> <div class = Control_bar style = border-bottom: 3px solide # 505151; id = contrôle_bar_mask> </ div> <div class = Control_Bar_Cursor> </ Div> </ Body> <Script> window.onload = function () {var contrôle_bar = document.getElementsByClassName (Control_Bar) [0]; var_bar_bar_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.onmousmove = function () {var cursor_x = event.clientx; 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.leftwidth;} Else {Control_Bar_Cursor.Leftyle.leftwidth;} Else {Control_Bar_Cursor.Leftwidth;} Else {Control_Bar_Cursor.Leftwidth;} Else {contrôle cursor_x - def_left + px;} // 亮度比 var proportion = parseInt (contrôle_bar_cursor.offsetleft - def_left) / parseInt (contrôle_bar.offsetwidth - 1); contrôle_bar_mask.style.width = proportion * Control_Bar.offsetWidth + Px; mask.style.opory = 1 - 1 - proportion;}; window.onMouseUp = function () {window.onMouseMove = null;};};}; </cript> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 corps 添加了一个背景颜色
html
<div class = Control_bar> </div> <div class = Control_Bar style = border-bottom: 3px solide # 505151; id = contrôle_bar_mask> </div> <div class = Control_Bar_Cursor> </div>
CSS
Body {Background: Back;}. Control_Bar {Height: 200px; Largeur: 500px; Border-Bottom: 3PX SOLID # 888888;}. CONTROL_BAR_CURSOR {Height: 25px; Largeur: 8px; Contexte: # 505151; Border-Radius: 5px;}效果图
2. 将各个元素叠到一起
CSS
Body {Background: Black;}. Control_Bar {Height: 200px; Largeur: 500px; Border-Bottom: 3PX SOLID # 888888;}. CONTROL_BAR_CURSOR {Height: 25px; Largeur: 8px; Contexte: # 505151; Border-Radius: 5px; marge: -12.5px; Position: relative; en haut: 0; gauche: 0;}. Control_Bar_Cursor: Hover {Background: White;} # Control_Bar_Mask {margin-top: -203px; Largeur: 100px;}这里为了显示遮罩效果把遮罩层的 div 宽度设小了
3. 添加 JS
js
window.onload = function () {var contrôle_bar = document.getElementsByClassName (Control_Bar) [0]; var contrôle_bar_mask = document.getElementById (contrôle_bar_mask); var contrôle_bar_cursor = document.getElementsByClassName (contrôle_bar_cursor) [0]; var def_left = contrôle_bar_cursor.offsetLeft; document.body.onmousedown = function () {window.onmousmove = 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> contrôle_bar.offsetwidth + def_left) {control_bar_cursor.style.left = contrôle_bar.offsetwidth; } else {contrôle_bar_cursor.style.left = cursor_x - def_left + px; } var proportion = parseInt (contrôle_bar_cursor.offsetleft - def_left) / parseInt (Control_bar.offsetWidth - 1); contrôle_bar_mask.style.width = proportion * contrôle_bar.offsetwidth + px; }; window.onMouseUp = function () {window.onMouseMove = null; }; };};4. 添加一个 Masque 用控制条来控制其透明度达到亮度调节效果
<div class = mask> </div>
.Mask {position: fixe; en bas: 0; en haut: 0; à gauche: 0; à droite: 0; Contexte: noir; z-index: -1;} window.onload = function () {var contrôle_bar = document.getElementsByClassName (Control_Bar) [0]; var contrôle_bar_mask = document.getElementById (contrôle_bar_mask); var contrôle_bar_cursor = document.getElementsByClassName (contrôle_bar_cursor) [0]; var def_left = contrôle_bar_cursor.offsetLeft; var mask = document.getElementsByClassName (mask) [0]; document.body.onmousedown = function () {window.onmousmove = 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> contrôle_bar.offsetwidth + def_left) {control_bar_cursor.style.left = contrôle_bar.offsetwidth; } else {contrôle_bar_cursor.style.left = cursor_x - def_left + px; } // 亮度比 var proportion = parseInt (contrôle_bar_cursor.offsetleft - def_left) / parseInt (Control_bar.offsetWidth - 1); contrôle_bar_mask.style.width = proportion * contrôle_bar.offsetwidth + px; mask.style.opacity = 1 - proportion; }; window.onMouseUp = function () {window.onMouseMove = null; }; };};总结到此这篇关于 HTML + CSS + JS 模仿 Win10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 HTML CSS WIN10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， 希望大家以后多多支持武林网！