HTML+CSS+JS模仿win10亮度调节效果的示例代码
这篇文章主要介绍了HTML+CSS+JS模仿win10亮度调节效果的示例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
HTML+CSS+JS模仿win10亮度调节效果
代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 | <!doctype html> < html > < head > < meta charset = "utf-8" > < title >模仿win10的亮度调节</ title > < style > .control_bar{ height:200px; width:500px; border-bottom:3px solid #888888; } .control_bar_cursor{ height:25px; width:8px; background: #505151; border-radius:5px; margin-top:-12.5px; position:relative; top:0; left:0; } .control_bar_cursor:hover{ background:white; } #control_bar_mask{ margin-top:-203px; width:0px; } .mask{ position:fixed; bottom:0; top:0; left:0; right:0; background: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"); 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"; } //亮度比 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 - proportion; }; window.onmouseup = function(){ window.onmousemove = null; }; }; }; </ script > </ html > |
1.将各个元素的样子写出来
这里为了方便好观察给body添加了一个背景颜色
html
1 2 3 4 5 6 7 | < 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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 | body{ background :back; } .control_bar{ height : 200px ; width : 500px ; border-bottom : 3px solid #888888 ; } .control_bar_cursor{ height : 25px ; width : 8px ; background : #505151 ; border-radius: 5px ; } |
效果图
2. 将各个元素叠到一起
css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | body{ background : black ; } .control_bar{ height : 200px ; width : 500px ; border-bottom : 3px solid #888888 ; } .control_bar_cursor{ height : 25px ; width : 8px ; background : #505151 ; border-radius: 5px ; margin-top : -12.5px ; position : relative ; top : 0 ; left : 0 ; } .control_bar_cursor:hover{ background : white ; } #control_bar_mask{ margin-top : -203px ; width : 100px ; } |
这里为了显示遮罩效果把遮罩层的div宽度设小了
3. 添加js
js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 | 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 proportion = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1); control_bar_mask.style.width = proportion * control_bar.offsetWidth + "px" ; }; window.onmouseup = function (){ window.onmousemove = null ; }; }; }; |
4. 添加一个mask用控制条来控制其透明度达到亮度调节效果
1 | <div class= "mask" ></div> |
1 2 3 4 5 6 7 8 9 | .mask{ position : fixed ; bottom : 0 ; top : 0 ; left : 0 ; right : 0 ; background : black ; z-index : -1 ; } |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | 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" ; } //亮度比 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 - proportion; }; window.onmouseup = function (){ window.onmousemove = null ; }; }; }; |
总结
到此这篇关于HTML+CSS+JS模仿win10亮度调节效果的示例代码的文章就介绍到这了