HTML+CSS+JS模仿win10亮度调节效果的示例代码
互联网品牌圈关注到HTML+CSS+JS模仿win10亮度调节效果的示例代码
这篇文章主要介绍了HTML+CSS+JS模仿win10亮度调节效果的示例代码,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下
HTML+CSS+JS模仿win10亮度调节效果
代码
<!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
<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; width:500px; border-bottom:3px solid #888888;}.control_bar_cursor{ height:25px; width:8px; background: #505151; border-radius:5px;}
效果图
2. 将各个元素叠到一起
css
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
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用控制条来控制其透明度达到亮度调节效果
<div class="mask"></div>
.mask{ position:fixed; bottom:0; top:0; left:0; right:0; background:black; 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"; } //亮度比 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亮度调节效果的示例代码的文章就介绍到这了,更多相关html css win10 亮度调节内容请搜索脚本之家以前的文章或继续浏览下面的相关文章，希望大家以后多多支持脚本之家！
来源：脚本之家
链接：https://www.jb51.net/web/728926.html
尊敬的看官您对HTML+CSS+JS模仿win10亮度调节效果的示例代码有什么看法呢？互联网品牌制作专家愿与您共同探讨！版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请加微信号oem365 举报，一经查实，本站将立刻删除。上一篇: 在进行网站优化时你的文章合规吗 返 回 下一篇:做了这么久的seo排名优化为什么排名还是上不去
