html+css+jswin10亮度调节效果
代码
<！doctype html> <html> <head> <meta charset = utf-8> <title> ＃505151; border-radius：5px; margin-top：-12.5px; position：relative; top：0; left：0;}。control_bar_cursor：hover {background：white;}＃control_bar_ma SK {マージントップ：-203px; width：0px;}。マスク{position：sixt; bottom：0; top：0;左：0;右：0;背景：black; 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_mask）; 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 = function = var cursor_x event.clienty; if（cursor_x <def_left）{control_bar_cursor.style.left = 0;} else if（cursor_x> offsetwidth + def_left）{control_bar_cursor.style.left = control_bar.offsetwidth; cursor_x -def_left + 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 {background：back;}。control_bar {height：200px;幅：500px; Border-Bottom：3px Solid＃888888;}。control_bar_cursor {height：25px;幅：8px;背景：＃505151;ボーダーラジウス：5px;}效果图
2。
CSS
body {background：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 {background：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 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 propuments = parseint（control_bar_cursor.offsetleft -def_left） / parseint（control_bar.offsetwidth -1）; control_bar_mask.style.width = propertion * control_bar.offsetwidth + px; }; window.onmouseup = function（）{window.onmousemove = null; }; };};4。添加一个マスク用控制条来控制其透明度达到亮度调节效果
<div class = mask> </div>
.mask {position：sixt;下：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; } 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; // control_bar_mask.style.width = propertion * control_bar.offsetwidth + px; mask.style.opacity = 1-比率; }; window.onmouseup = function（）{window.onmousemove = null; }; };};总结html+css+js模仿win10亮度调节效果的示例代码的文章就介绍到这了、更多相关htmlcss win10亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章、希望大家以后多多支持武林网！