この記事では、スライダー検証コードを実装するための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 を応援していただければ幸いです。 以下もご興味があるかもしれません:
|
<<: Dreamweaver で Zen コーディングを使用する方法
>>: Faint: 「Web2.0 を使用して標準に準拠したページを作成する」
目次Dockerとは展開する1. イメージをプルする2. 画像を表示する3. コンテナを実行する4....
1. 概要1.1 基本概念: Docker は、Go 言語をベースにしたオープンソースのアプリケーシ...
目次最初の方法: MySQLデータベースが接続されていない場合2 番目の方法: データベースがすでに...
多くのプロジェクトでは、検証コードの送信など、カウントダウン機能を実装する必要があります。ここで、簡...
mysql 5.6.35 winx64無料インストールバージョン構成チュートリアルwin10、具体的...
遅いログクエリ機能スロー ログ クエリの主な機能は、設定された時間しきい値を超える SQL ステート...
会社の開発者がテスト環境で挿入ステートメントを実行すると、正常に実行されるまでに 10 秒以上かかり...
エラー 1290 (HY000) : MySQL サーバーは –secure-file-priv オ...
1. コントロールパネルで、MySQLのすべてのコンポーネントをアンインストールします。コントロール...
相対幅と絶対幅が競合する場合のdivソリューション概要: 一般的に、絶対幅を使用する場合は px を...
最近のプロジェクトでは、多くのフォーム、特にチェックボックスとラジオボタンの作成が含まれます。しかし...
まず、簡単な Docker インストールを実行します。イメージをカスタマイズするには、ベースイメージ...
目次1. 概要1.1 定義1.2 機能説明2. ELKを展開する2.1 ディレクトリとファイルを作成...
目次前面に書かれたルータ.jsonルート生成メニュー生成効果要約する前面に書かれたルートを繰り返し記...
この記事の例では、WeChatアプレットで複数行のテキストスクロールを実装するための具体的なコードを...