HTML+CSS+JS 模仿 Win10 亮度调节效果
代码
<! doctype html> <html> <head> <meta charset = utf-8> <title> 模仿 win10 的亮度调节 </title> <style> .control_bar {ความสูง: 200px; width: 500px; #505151; Border-Radius: 5px; margin-top: -12.5px; ตำแหน่ง: ญาติ; ด้านบน: 0; ซ้าย: 0;}. control_bar_cursor: โฮเวอร์ {พื้นหลัง: สีขาว;} #control_bar_ma sk {margin-top: -203px; width: 0px;}. หน้ากาก {ตำแหน่ง: คงที่; ด้านล่าง: 0; ด้านบน: 0; ซ้าย: 0; ขวา: 0; พื้นหลัง: ดำ; z-index: -1;} </style> </head> 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> <pristr> window.onload = function () {var control_bar = document.getElementsByClassName (control_bar) [0]; document.getElementByClassName (control_bar_cursor) [0]; var def_left = control_bar_cursor.offsetleft; var mask = document.getElementByClassName (หน้ากาก) [0]; document.body.onmousedown = function (window.onmousemove = ฟังก์ชั่น 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; Cursor_x - def_left + px;} // 亮度比 var scroption = parseint (control_bar_cursor.offsetleft - def_left)/parseint (control_bar.offsetWidth - 1); control_bar_mask.style.width = สัดส่วน สัดส่วน;}; 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
ร่างกาย {พื้นหลัง: back;}. control_bar {ความสูง: 200px; ความกว้าง: 500px; ขอบด้านล่าง: 3px Solid #888888;}. Control_bar_cursor {ความสูง: 25px; ความกว้าง: 8px; ความเป็นมา: #505151; Radius ชายแดน: 5px;}效果图
2. 将各个元素叠到一起
CSS
ร่างกาย {พื้นหลัง: ดำ;}. control_bar {ความสูง: 200px; ความกว้าง: 500px; ขอบด้านล่าง: 3px Solid #888888;}. Control_bar_cursor {ความสูง: 25px; ความกว้าง: 8px; ความเป็นมา: #505151; แนวชายแดน: 5px; ระยะขอบด้านบน: -12.5px; ตำแหน่ง: ญาติ; ด้านบน: 0; ซ้าย: 0;}. control_bar_cursor: โฮเวอร์ {พื้นหลัง: สีขาว;}#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; } else {control_bar_cursor.style.left = cursor_x - def_left + px; } สัดส่วน var = 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; var mask = document.getElementsByClassName (หน้ากาก) [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; } else {control_bar_cursor.style.left = cursor_x - def_left + px; } // 亮度比สัดส่วน var = 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 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章， 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！ 希望大家以后多多支持武林网！