HTML+CSS+JS模仿win10亮度调节效果
代码
<！doctype html> <html> <head> <meta charset = utf-8> <title> win10 win10 </title> </title> </title> <syled> .control_bar {高度：200px; width; width; width：500px; border-bottom：3px实心＃888888888888888;}。 ＃505151; border-radius：5px; margin-top：-12.5px;位置：相对; top; top; top：0;左：0;}。control_bar_cursor：hover {背景：white;}＃control_bar_ma sk {margin-top：-203px; width：0px;}。蒙版{位置：固定;底部：0; top：0; top：0; left：0;右：0;右：0;背景：黑色; z-index：-1;} </style> </style> </style> </head> </head> <body> <body> <div class = mask> </div> <div class = control_bar> </div> <div class = control_bar style = border-bottom：3px实心＃505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div> </div> </body> <script> window> window.onload = function（）{var control_bar = document.getElementsbybyclassName（control_bar）[0] document.getElementsByClassName（control_bar_cursor）[0]; var def_left = control_bar_cursor.offsetleft; var mask = document.getElementsByClassName（mask）[0]； event.clienty; if（cursor_x <def_left）{control_bar_cursor.style.style.left = 0;} else if（cursor_x> control_bar.offsetwidth + def_left + def_left + def_left）{control_bar_cursor.style.style.style.left = control_bar.offsetwid_ftersecter_fter_fter_fter_fter.ftry_fter; 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;mask.style.opacity = 1 -比例;}; window.onmouseup = function（）{window.onmousemove = null;};};}; </script> </script> </html>1.将各个元素的样子写出来
这里为了方便好观察给身体添加了一个背景颜色
html
<div class = control_bar> </div> <div class = control_bar style = border-bottom：3px实心＃505151; id = control_bar_mask> </div> <div class = control_bar_cursor> </div>
CSS
身体{背景：back;}。control_bar {高度：200px;宽度：500px;边界底：3PX实心＃888888;}。control_bar_cursor {高度：25px;宽度：8px;背景：＃505151;边界 - 拉迪乌斯：5px;}效果图
2。将各个元素叠到一起
CSS
身体{背景：black;}。control_bar {高度：200px;宽度：500px;边界底：3PX实心＃888888;}。control_bar_cursor {高度：25px;宽度：8px;背景：＃505151;边界拉迪乌斯：5px;保证金顶：-12.5px;位置：相对；顶部：0;左：0;}。control_bar_cursor：hover {背景：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;如果（cursor_x <def_left）{control_bar_cursor.style.left = 0; } else if（cursor_x> control_bar.offsetWidth + def_left）{control_bar_cursor.style.style.left = control_bar.offsetWidth; } else {control_bar_cursor.style.left = cursor_x -def_left + px; } var extrape = 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> </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; varmask = document.getElementsByClassName（mask）[0]; document.body.onmousedown = function（）{window.onmousemove = function（）{var cursor_x = event.clientx; var cursor_y = event.clienty;如果（cursor_x <def_left）{control_bar_cursor.style.left = 0; } else if（cursor_x> control_bar.offsetWidth + def_left）{control_bar_cursor.style.style.left = control_bar.offsetWidth; } else {control_bar_cursor.style.left = cursor_x -def_left + px; } //亮度比var farmeportion = 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亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持武林网！