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

スライダー検証コードを実装する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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JSはドラッグスライダー検証を実装します
  • JavaScript スライダー検証ケース
  • ログインスライダー検証を実装するJavaScript
  • JavaScript でドラッグ スライダー パズルの検証機能を実装します (html5、canvas)
  • js キャンバスはスライダー検証を実現します
  • js はログインを確認するためのスライダーを実装します
  • ネイティブ JS カプセル化ドラッグ検証スライダー実装コード例
  • iQiyi スライダー暗号化の JS リバースエンジニアリングの実装

<<:  Dreamweaver で Zen コーディングを使用する方法

>>:  Faint: 「Web2.0 を使用して標準に準拠したページを作成する」

推薦する

DockerでMongoDBコンテナをデプロイする方法

目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....

Dockerコンテナの紹介

1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...

MySQLコマンドラインでSQLファイルを実行するいくつかの方法

目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...

Vueは小さなカウントダウン機能を実装します

多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...

win10 mysql 5.6.35 winx64 無料インストールバージョン設定チュートリアル

mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...

MySQLスローログクエリの詳細な説明

遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...

MySQL がデータの削除と挿入に非常に時間がかかる問題の解決策

会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...

MySQL データをエクスポートする際の secure-file-priv 問題の解決方法

エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...

WindowsシステムでMySQLデータベースを完全にアンインストールして、MySQLを再インストールします

1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...

相対幅と絶対幅が競合する場合の HTML+CSS div ソリューション

相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...

フォーム要素とプロンプトテキストが揃っていない問題

最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...

dockerカスタムイメージでphp7をビルドする方法

まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...

Docker Compose を使用して ELK を迅速にデプロイする (テスト済みで効果的)

目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...

vue構成ファイルはルーティングとメニューインスタンスコードを自動的に生成します

目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...

WeChatアプレットが複数行テキストのスクロール効果を実現

この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...