Html+css+js 模仿 win10 亮度调节效果
代码
<! Doctype html> <html> <head> <meta charset = utf-8> <title> 模仿 win10 的亮度调节 </itement> <tyle> .control_bar {tinggi: 200px; lebar: 500px; border-bottom: 3px solid #8888888;}. Control_curs; control_cursor {88888;}. #505151; Border-Radius: 5px; margin-top: -12.5px; posisi: relatif; atas: 0; kiri: 0;}. Control_bar_cursor: hover {latar belakang: white;} #control_bar_ma sk {margin-top: -203px; lebar: 0px;}. mask {posisi: diperbaiki; bawah: 0; atas: 0; kiri: 0; kanan: 0; latar belakang: hitam; z-index: -1;} </tyle> </head> <body> <v 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]; control_bar_mask = document.getelementById (control_bar) [0]; control_bar_bark = document.getelementById (control_bar) [0]; control); control (control (controlmask = 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.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; controlfsetor {style.style.left = control. Cursor_x - def_left + px;} // 亮度比 proporsi var = parseInt (control_bar_cursor.offsetleft - def_left)/parseInt (control_bar.offsetwidth - 1); control_bar_mask.style.width = proporsional * control_bar.offsetwidth.style. proporsi;}; window.onmouseup = function () {window.onmouseMove = null;};};}; </script> </html>1. 将各个元素的样子写出来
这里为了方便好观察给 Tubuh 添加了一个背景颜色
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; Lebar: 500px; Border-Bottom: 3px Solid #888888;}. CONTROL_BAR_CURSOR {Height: 25px; Lebar: 8px; Latar belakang: #505151; Border-Radius: 5px;}效果图
2. 将各个元素叠到一起
CSS
body {background: black;}. control_bar {height: 200px; Lebar: 500px; Border-Bottom: 3px Solid #888888;}. CONTROL_BAR_CURSOR {Height: 25px; Lebar: 8px; Latar belakang: #505151; Border-Radius: 5px; margin-top: -12.5px; Posisi: kerabat; TOP: 0; Kiri: 0;}. CONTROL_BAR_CURSOR: Hover {background: white;}#control_bar_mask {margin-top: -203px; Lebar: 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; } 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 proporsi = parseInt (control_bar_cursor.offsetleft - def_left) / parseInt (control_bar.offsetWidth - 1); control_bar_mask.style.width = proporsi * control_bar.offsetwidth + px; }; window.onmouseUp = function () {window.onmouseMove = null; }; };};4. 添加一个 topeng 用控制条来控制其透明度达到亮度调节效果
<Div class = mask> </div>
.mask {position: diperbaiki; Bawah: 0; TOP: 0; Kiri: 0; Kanan: 0; Latar Belakang: Hitam; 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; } // 亮度比 proporsi var = parseInt (control_bar_cursor.offsetleft - def_left) /parseInt (control_bar.offsetWidth - 1); control_bar_mask.style.width = proporsi * control_bar.offsetwidth + px; mask.style.opacity = 1 - proporsi; }; window.onmouseUp = function () {window.onmouseMove = null; }; };};总结到此这篇关于 html+css+js 模仿 win10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 html css win10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章 ， ，