JSはプログレスバーをドラッグして要素の透明度を変更することを実装しています

今日ご紹介したいのは、ネイティブ JS を使用してプログレスバーをドラッグし、要素の透明度を変更する方法です。効果は次のとおりです。

以下はコード実装です。コピーして貼り付けていただいて結構です。

<!DOCTYPE html>
<html>
 
<ヘッド>
    <meta http-equiv="コンテンツタイプ" コンテンツ="text/html; charset=utf-8" />
    <title>ネイティブ JS ドラッグ プログレス バーで要素の透明度を変更する</title>
    <スタイル>
        ＃親 {
            幅: 400ピクセル;
            高さ: 20px;
            背景: #CCC;
            位置: 相対的;
            マージン: 20px 自動;
        }
 
        #div1 {
            幅: 20px;
            高さ: 20px;
            背景: 赤;
            カーソル: ポインタ;
            位置: 絶対;
        }
 
        #div2 {
            幅: 300ピクセル;
            高さ: 300px;
            マージン: 0 自動;
            フィルター:アルファ(不透明度:0);
            不透明度: 0;
            背景: 黄色;
        }
    </スタイル>
 
    <スクリプト>
        window.onload = 関数（）{
 
            var oDiv = document.getElementById('div1');
            var oParent = document.getElementById('parent');
            var oDiv2 = document.getElementById('div2');
 
            oDiv.onmousedown = 関数 (ev) {
 
                var oEvent = ev || イベント;
                //スライダーに対するマウスの位置を計算します var disX = oEvent.clientX - oDiv.offsetLeft;
 
                document.onmousemove = 関数 (ev) {
 
                    var oEvent = ev || イベント;
                    //スライダーの動的な左値を計算します var l = oEvent.clientX - disX;
 
                    //ドラッグ範囲を制限する if (l < 0) {
 
                        0 の場合
 
                    } そうでない場合 (l > oParent.offsetWidth - oDiv.offsetWidth) {
 
                        l = oParent.offsetWidth - oDiv.offsetWidth;
                    }
 
                    oDiv.style.left = l + 'px';
 
                    //ドラッグ移動距離とドラッグ可能な合計範囲の比率を計算します。var scale = l / (oParent.offsetWidth - oDiv.offsetWidth);
 
                    //マウスをドラッグすると Div2 が徐々に表示または非表示になります oDiv2.style.filter = 'alpha(opacity:' + 100 * scale + ')';
                    oDiv2.style.opacity = スケール;
 
                };
 
                document.onmouseup = 関数（）{
 
                    ドキュメント.onmousemove = null;
                    ドキュメント.onmouseup = null;
                };
            };
        };
    </スクリプト>
</head>
 
<本文>
    <div id="親">
        <div id="div1"></div>
    </div>
    <div id="div2"></div>
</本文>
 
</html>

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: