スライダー検証コードを実装する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 を使用して標準に準拠したページを作成する」

推薦する

MySql 共通クエリコマンド操作リスト

MYSQL でよく使用されるクエリ コマンド: mysql> select version()...

Webデザインと制作のテスト問題と参考回答

<br />Web デザインと制作テスト パート I 多肢選択問題 1. 単一選択問題 ...

Zabbix ベースの Jenkins プロセス監視の詳細な説明

1. 監視アーキテクチャ図 2. 実装のアイデアJenkins に Metrics プラグインをイン...

Vue モバイル プロジェクトでページ キャッシュを実装する方法のサンプル コード

背景モバイル デバイスでは、ページ ジャンプ間のキャッシュが必須要件です。例: ホームページ =&g...

Docker で MySQL サービスをデプロイする方法と、遭遇する落とし穴

最近、ポーターを学んでいます。こんなに強力なものがあったなんて、今まで知らなかった気がします。クラス...

CentOS MySQLデータベースのスケジュールバックアップを実装する方法

次のスクリプトは、MySQLデータベース全体のスケジュールされたバックアップに使用されます。 mys...

OpenShift のクイックインストールの詳細な手順

OpenShift 3.9 の最新バージョンを体験する最も早い方法。準備 [root@host ~]...

DOCTYPE HTMLを使用する理由

これがないと、ブラウザはページをレンダリングするときに Quirks モードを使用することがわかって...

MySQL5.6.31 winx64.zip インストールと設定のチュートリアル

#1. ダウンロード # #2. ローカルに解凍し、必要な構成のmy*.iniを変更します。 #3....

更新とデータ整合性処理のためのMySQLトランザクション選択の説明

MySQL のトランザクションはデフォルトで自動的にコミットされます (autocommit = 1...

nginx を使用して特定のインターフェース (URL) をブロックする方法

1. はじめに場合によっては、Web プラットフォームがオンラインになった後、サービス インターフェ...

HTMLがHikvisionカメラのリアルタイム監視機能を実現

最近、同社は CCFA 関連のいくつかの作業を行う予定で、その 1 つはカメラのリアルタイム監視を再...

MySQL データベース内の varchar 型の数値のサイズを比較する方法

テストテーブルを作成する -- ---------------------------- -- ch...

Web ページの HTML コードの説明: 順序付きリストと順序なしリスト

このセクションでは、HTML のリスト要素について学習します。リストは、Web サイトのデザインにお...

Linux ドライバ開発でよく使われる関数 copy_from_user open read write の詳細な説明

目次Linux ドライバーの共通機能 (copy_from_user open read write...