阅读 267

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亮度调节效果的示例代码的文章就介绍到这了



文章分类
后端
文章标签
html
css
js
win
亮度
效果
示例
代码
版权声明：本站是系统测试站点，无实际运营。本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 XXXXXXo@163.com 举报，一经查实，本站将立刻删除。
相关推荐