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添加了@ www.haoshilao.net一个背景颜色

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;
}

这里为了显示遮罩效果@ www.xuepai.net把遮罩层的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;
        };
    };
};

 

posted @ 2026-01-08 21:06  zxcva  阅读(8)  评论(0)    收藏  举报