Win10の明るさ調整効果を模倣するHTML+CSS+JSサンプルコード

HTML+CSS+JS で Win10 の明るさ調整効果を模倣

コード

<!doctypehtml>
<html>
	<ヘッド>
		<メタ文字セット="utf-8">
		<title>Win10 の明るさ調整を模倣する</title>
		<スタイル>
			.コントロールバー{
				高さ:200px;
				幅:500ピクセル;
				border-bottom:3px 実線 #888888;
				
			}
			.コントロールバーカーソル{
				高さ:25px;
				幅:8px;
				背景: #505151;
				境界線の半径:5px;
				上マージン:-12.5px;
				位置:相対;
				トップ:0;
				左:0;
			}
			.コントロールバーカーソル:ホバー{
				背景：白;
			}
			#コントロールバーマスク{
				上マージン:-203px;
				幅:0px;
			}
			。マスク{
				位置:固定;
				下:0;
				トップ:0;
				左:0;
				右:0;
				背景：黒;
				zインデックス:-1;
			}
		</スタイル>
	</head>
	<本文>
		<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>
	</本文>
	<スクリプト>
		window.onload = 関数(){
			var control_bar = document.getElementsByClassName("control_bar")[0];
			var コントロール バー マスク = document.getElementById("コントロール バー マスク");
			var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
			コントロールバーカーソルのオフセットを設定します。
			var マスク = document.getElementsByClassName("マスク")[0];
			document.body.onmousedown = 関数(){
				window.onmousemove = 関数(){
					var カーソル_X = event.clientX;
					var カーソル_Y = event.clientY;
					カーソルXがdef_leftの場合
						コントロールバーカーソル.style.left = 0;
					}それ以外の場合(cursor_X > control_bar.offsetWidth + def_left){
						コントロールバーカーソルのスタイルを左にドラッグします。
					}それ以外{
						control_bar_cursor.style.left = cursor_X - def_left + "px";
					}
					//明るさの比率 var ratio = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
					control_bar_mask.style.width = 比率 * control_bar.offsetWidth + "px";
					mask.style.opacity = 1 - 比率;
					};
				window.onmouseup = 関数(){
					ウィンドウのonmousemove = null;
				};
			};
		};
	</スクリプト>
</html>

1. 各要素の外観を書き留める

ここでは、観察しやすいようにボディに背景色が追加されています。

html

<div class="コントロールバー">
</div>
<div class="control_bar" style="border-bottom:3px solid #505151;"  
id="コントロールバーマスク>
</div>
<div class="コントロールバーカーソル">
</div>

体{
    背景:バック;
}
.コントロールバー{
    高さ:200px;
    幅:500ピクセル;
    border-bottom:3px 実線 #888888;
}
.コントロールバーカーソル{
    高さ:25px;
    幅:8px;
    背景: #505151;
    境界線の半径:5px;
}

レンダリング

2. 要素を積み重ねる

体{
    背景：黒;
}
.コントロールバー{
    高さ:200px;
    幅:500ピクセル;
    border-bottom:3px 実線 #888888;

}
.コントロールバーカーソル{
    高さ:25px;
    幅:8px;
    背景: #505151;
    境界線の半径:5px;
    上マージン:-12.5px;
    位置:相対;
    トップ:0;
    左:0;
}
.コントロールバーカーソル:ホバー{
    背景：白;
}
#コントロールバーマスク{
    上マージン:-203px;
    幅:100ピクセル;
}

マスク効果を出すために、マスクレイヤーのdiv幅を小さく設定します。

3. jsを追加する

window.onload = 関数(){
    var control_bar = document.getElementsByClassName("control_bar")[0];
    var コントロール バー マスク = document.getElementById("コントロール バー マスク");
    var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
    コントロールバーカーソルのオフセットを設定します。
    document.body.onmousedown = 関数(){
        window.onmousemove = 関数(){
            var カーソル_X = event.clientX;
            var カーソル_Y = event.clientY;
            カーソルXがdef_leftの場合
                コントロールバーカーソル.style.left = 0;
            }それ以外の場合(cursor_X > control_bar.offsetWidth + def_left){
                コントロールバーカーソルのスタイルを左にドラッグします。
            }それ以外{
                control_bar_cursor.style.left = cursor_X - def_left + "px";
            }
            var 比率 = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
            control_bar_mask.style.width = 比率 * control_bar.offsetWidth + "px";
        };
        window.onmouseup = 関数(){
            ウィンドウのマウス移動を null にします。
        };
    };
};

4.マスクを追加し、コントロールバーを使用して透明度を制御し、明るさ調整効果を実現します。

<div class="mask"></div>

。マスク{
    位置:固定;
    下:0;
    トップ:0;
    左:0;
    右:0;
    背景：黒;
    zインデックス:-1;
}

window.onload = 関数(){
    var control_bar = document.getElementsByClassName("control_bar")[0];
    var コントロール バー マスク = document.getElementById("コントロール バー マスク");
    var control_bar_cursor = document.getElementsByClassName("control_bar_cursor")[0];
    コントロールバーカーソルのオフセットを設定します。
    var マスク = document.getElementsByClassName("マスク")[0];
    document.body.onmousedown = 関数(){
        window.onmousemove = 関数(){
            var カーソル_X = event.clientX;
            var カーソル_Y = event.clientY;
            カーソルXがdef_leftの場合
                コントロールバーカーソル.style.left = 0;
            }それ以外の場合(cursor_X > control_bar.offsetWidth + def_left){
                コントロールバーカーソルのスタイルを左にドラッグします。
            }それ以外{
                control_bar_cursor.style.left = cursor_X - def_left + "px";
            }
            //明るさの比率 var ratio = parseInt(control_bar_cursor.offsetLeft - def_left) / parseInt(control_bar.offsetWidth - 1);
            control_bar_mask.style.width = 比率 * control_bar.offsetWidth + "px";
            mask.style.opacity = 1 - 比率;
        };
        window.onmouseup = 関数(){
            ウィンドウのマウス移動を null にします。
        };
    };
};

要約する

これで、Win10 の明るさ調整効果を模倣する HTML+CSS+JS のサンプルコードに関するこの記事は終了です。より関連性の高い HTML CSS Win10 明るさ調整コンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM を応援していただければ幸いです。

<<: jQueryのコア機能とイベント処理の詳細な説明

>>: mysql8.x docker リモートアクセスの詳細な設定