常春岛资源网 Design By www.syssdc.com
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; }; }; };
总结
常春岛资源网 Design By www.syssdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
常春岛资源网 Design By www.syssdc.com
暂无评论...
更新日志
2024年05月20日
2024年05月20日
- 智中之宝新计划怎么触发?任务完成攻略
- 吴业坤.2015-Kwan.Gor【星娱乐】【FLAC分轨】
- 陈雪凝.2024-我新长出的犄角(EP)【少城时代】【FLAC分轨】
- 林志颖.1994-火热的心【飞碟】【WAV+CUE】
- 半糖初恋
- 大脚野人日落 Sasquatch Sunset
- 独角兽塞尔玛 Thelma the Unicorn
- 群星《世界顶级汽车音响试音王(嗨歌王)24K金碟》16CD[WAV+CUE][7.9G]
- 《曾宝仪4CD合集》[WAV+CUE][2.3G]
- 周杰伦《八度空间》台湾手版[WAV+CUE][475M]
- 咏月风雅前期怎么玩 前期组队玩法解析
- 咏月风雅攻略大全 新手入门必看攻略
- 咏月风雅公测福利大全 有哪些奖励
- dnf装备成长攻略
- 鸣潮丹瑾适配武器选什么 丹瑾四星五星武器推荐