スライダー検証コードを実装するJavaScript

この記事では、スライダー検証コードを実装するためのJavaScriptの具体的なコードを参考までに共有します。具体的な内容は次のとおりです。

効果：下のスライダーをマウスで押したままドラッグすると、スライダーが移動します。上の大きな画像にある小さな画像の背景のスライダーも一緒に移動します。大きな画像の背景が欠けている領域に移動すると検証が完了します。上記の効果を実現するには、マウスが押される (mousedown イベント)、マウスが放される (mouseup イベント)、マウスが移動する (mousemove イベント) ことが必要です。

まず、静的効果を実現するための HTML 部分を作成します。大きな画像内の移動可能な小さな背景ブロックのサイズは、大きな画像と同じです。小さな画像ブロックの背景に background-position 属性を追加して、小さな画像に表示される画像領域を制御します。

HTML:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        体{
            背景: #34495e;
        }
        。包む{
            幅: 600ピクセル;
            マージン: 100px 自動;
        }
        。バナー{
            幅: 600ピクセル;
            高さ: 400px;
            背景: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            背景サイズ: 600px 400px;
            位置: 相対的;
        }
        .空白ボックス{
            位置: 絶対;
            上: 100px;
            左: 200px;            
            幅: 50px;
            高さ: 50px;
            背景: #fff;
        }
        。ブロック{
            位置: 絶対;
            上: 100px;
            左: 0;            
            幅: 50px;
            高さ: 50px;
            背景: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            背景サイズ:600px 400px;
            背景の位置:-200px -100px;
            境界線: 1px 実線の赤;
        }
        。動く{
            位置: 相対的;
        }
        .pを移動{
            高さ: 50px;
            行の高さ: 50px;
            フォントサイズ: 16px;
            色: #666;
            背景: #eee;
            テキスト配置: 中央;
        }
        .move-block{
            位置: 絶対;
            左: 0;
            上: 0;
            幅: 50px;
            高さ: 50px;
            背景:#1abc9c;
            カーソル: ポインタ;
        }
    </スタイル>
</head>
<本文>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>スライダーを動かす>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
</本文>
</html>

JS部分:

必要な DOM 要素を取得します。マウスは下部のスライダー上で押されたときのみ移動できるので、このスライダーにマウスプレスイベントをバインドします。このイベントでは、イベントオブジェクトを通じてマウスの座標点を取得し、小さなブロックのオフセットを減算してスライダー移動の偏差値を取得します (マウスの座標点から偏差値を引いた値が実際の移動距離です)。これにより、移動状態がスライド可能になります。

バナーを document.querySelector('.banner') とします。
blankBox を document.querySelector('.blank-box') とします。
block = document.querySelector('.block'); とします。

moveBlock を document.querySelector('.move-block') に移動します。
let isDrop=false;//スライド可能か? let x,y;//オフセット moveBlock.onmousedown=function(e){
    var e=e||window.event;
    x = e.clientX - ブロック.offsetLeft;
    y = e.clientY - ブロック.offsetTop;
    ドロップする
}

スライディング状態が true の場合、マウス座標から偏差値が減算され、2 つの可動スライダーの位置が変更されます。スライダーを大きな画像の欠落領域までスライドすると、検証が成功したことを示します。

moveBlock.onmousemove=関数(e){
            if(isDrop){
                var e=e||window.event;
                左に e.clientX-x と置きます。
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                // 200ピクセルの画像の左から欠けている領域の位置 if (Math.abs(left-200)<=3){
                   alert('検証に成功しました');
                }
            }            
        }

この時点で、効果は当初達成されていますが、スライダーは大きな画像の範囲を超えてしまいます。スライダーのスライド距離に制限を追加する必要があります。そうしないと、大きな画像の範囲を超えてしまいます。

moveBlock.onmousemove=関数(e){
            if(isDrop){
                var e=e||window.event;
                左に e.clientX-x と置きます。
                maxX=banner.offsetWidth-block.offsetWidth とします。
                //範囲制限 if (left < 0) {
                    左=0
                }
                if(左>最大X){
                    左=最大X
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                // 200ピクセルの画像の左から欠けている領域の位置 if (Math.abs(left-200)<=3){
                    alert('検証に成功しました');
                }
            }            
        }

マウスを離すと、移動可能状態が false に変わります。あまり速く移動しないようにするには、イベントをドキュメントにバインドします。

document.onmouseup=関数(){
            isDrop=false;
        }

ここで効果が得られました。背景画像の欠けている部分をランダムにしたい場合は、ランダム配置機能を追加することができます。

//ランダム配置関数 randomPosition(){
            /*乱数式は nmMath.random() * (mn)+n* の間の乱数を取得します/
            ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100); とします。
            ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0); とします。

            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }

完全なコード:

<!DOCTYPE html>
<html lang="ja">
<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>ドキュメント</title>
    <スタイル>
        *{
            マージン: 0;
            パディング: 0;
        }
        体{
            背景: #34495e;
        }
        。包む{
            幅: 600ピクセル;
            マージン: 100px 自動;
        }
        。バナー{
            幅: 600ピクセル;
            高さ: 400px;
            背景: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            背景サイズ: 600px 400px;
            位置: 相対的;
        }
        .空白ボックス{
            位置: 絶対;
            上: 100px;
            左: 200px;            
            幅: 50px;
            高さ: 50px;
            背景: #fff;
        }
        。ブロック{
            位置: 絶対;
            上: 100px;
            左: 0;            
            幅: 50px;
            高さ: 50px;
            背景: url(img/ChMkJ1bZOGOIE_lfABJWl176xQgAAMhjALAOLwAElav369.jpg);
            背景サイズ:600px 400px;
            背景の位置:-200px -100px;
            境界線: 1px 実線の赤;
        }
        。動く{
            位置: 相対的;
        }
        .pを移動{
            高さ: 50px;
            行の高さ: 50px;
            フォントサイズ: 16px;
            色: #666;
            背景: #eee;
            テキスト配置: 中央;
        }
        .move-block{
            位置: 絶対;
            左: 0;
            上: 0;
            幅: 50px;
            高さ: 50px;
            背景:#1abc9c;
            カーソル: ポインタ;
        }
    </スタイル>
</head>
<本文>
    <div class="wrap">
        <div class="banner">
            <div class="blank-box"></div>
            <div class="block"></div>
        </div>
        <div class="move">
            <p>スライダーを動かす>>></p>
            <div class="move-block"></div>
        </div>
    </div>  
    <スクリプト>
        バナーを document.querySelector('.banner') とします。
        blankBox を document.querySelector('.blank-box') とします。
        block = document.querySelector('.block'); とします。

        moveBlock を document.querySelector('.move-block') に移動します。
        let isDrop=false; //スライド可能か? let x,y,targetleft; //オフセット、左の位置決め距離 moveBlock.onmousedown=function(e){
            var e=e||window.event;
            x = e.clientX - ブロック.offsetLeft;
            y = e.clientY - ブロック.offsetTop;
            ドロップする
        }

        moveBlock.onmousemove=関数(e){
            if(isDrop){
                var e=e||window.event;
                左に e.clientX-x と置きます。
                maxX=banner.offsetWidth-block.offsetWidth とします。
                //範囲制限 if (left < 0) {
                    左=0
                }
                if(左>最大X){
                    左=最大X
                }
                block.style.left=left+'px';
                moveBlock.style.left=left+'px';
                //200ピクセルの画像の左からの欠落領域の位置 if (Math.abs (left-targetleft) <= 5) {
                    alert('検証に成功しました');
                }
            }            
        }
        document.onmouseup=関数(){
            isDrop=false;
        }

        //ランダム配置関数 randomPosition(){
            /*乱数式は nmMath.random() * (mn)+n* の間の乱数を取得します/
            ranX=Math.round(Math.random()* (banner.offsetWidth-100)+100); とします。
            ranY=Math.round(Math.random() * (banner.offsetHeight-0)+0); とします。


            ターゲット左=ranX;
            blankBox.style.left=ranX+'px';
            blankBox.style.top=ranY+'px';

            block.style.top=ranY+'px';
            block.style.backgroundPosition=-ranX+'px '+-ranY+'px'
        }
        ランダム位置()
    </スクリプト>
</本文>
</html>

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

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