html+css+js 模仿 win10 亮度调节效果
代码
<! docType html> <html> <head> <메타 charset = utf-8> <title> 模仿 win10 的亮度调节 </title> <style> .control_bar {height : 200px; width : 500px; Border-Bottom : 3px solid #888888;}. #505151; Border-Radius : 5px; 마진-탑 : -12.5px; 위치 : 상대; 상단; 상단 : 0; 왼쪽 : 0;}. control_bar_cursor : hover {배경 : 흰색;} #control_bar_ma sk {마진-탑 : -203px; 너비 : 0px;}. 마스크 {위치 : 고정; 하단; 맨 아래 : 0; 왼쪽 : 0; 오른쪽 : 0; 배경 : 검은 색; z- 인덱스 : -1;} </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> <cript> window.onload = function () {var control_bar = document.getElementsByClassName (control_bar) [0]; var control_bar_mask = document.getElemberiD (var 컨트롤); 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 = cursor_. event.clienty; if (cursor_x <def_left) {control_bar_cursor.style.left = 0;} else (cursor_x> control_bar.offsetwidth + def_left) {control_bar_cursor.style.style.left = control_bar.offsetwidth;} else {control_bar_bar_cursor. - def_left + px;} // 亮度比 var raction = parseint (control_bar_cursor.offsetleft -def_left)/parseint (control_bar.offsetwidth -1); control_bar_mask.style.width = proportion * control_bar.offsetwidth + px; mask.style.spicaticy = 1 -1 -xrator;}; function () {Window.onMousEmove = null;};};}; </script> </html>1. 将各个元素的样子写出来
body 添加了一个背景颜色
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 {높이 : 200px; 너비 : 500px; Border-Bottom : 3px Solid #888888;}. Control_Bar_Cursor {높이 : 25px; 너비 : 8px; 배경 : #505151; Border-Radius : 5px;}效果图
2. 将各个元素叠到一起
CSS
Body {배경 : Black;}. Control_bar {높이 : 200px; 너비 : 500px; Border-Bottom : 3px Solid #888888;}. Control_Bar_Cursor {높이 : 25px; 너비 : 8px; 배경 : #505151; Border-Radius : 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; } 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 비율 = parseint (control_bar_cursor.offsetleft -def_left) / parseint (control_bar.offsetwidth -1); control_bar_mask.style.width = prosation * control_bar.offsetwidth + px; }; window.onmouseup = function () {window.onmouseMove = null; }; };};4. 添加一个 마스크 添加一个
<div class = mask> </div>
.mask {위치 : 고정; 하단 : 0; 상단 : 0; 왼쪽 : 0; 오른쪽 : 0; 배경 : 검은 색; z- 인덱스 : -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; } 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 비율 = parseint (control_bar_cursor.offsetleft -def_left) /parseint (control_bar.offsetwidth -1); control_bar_mask.style.width = prosation * control_bar.offsetwidth + px; mask.style.opacity = 1- 비율; }; window.onmouseup = function () {window.onmouseMove = null; }; };};总结HTML+CSS+JS 模仿 WIN10 亮度调节效果的示例代码的文章就介绍到这了, 更多相关 HTML CSS WIN10 亮度调节内容请搜索武林网以前的文章或继续浏览下面的相关文章, 希望大家以后多多支持武林网！